必需属性不适用于Angular Js中的文件输入

Posted 2023-02-22

【中文标题】必需属性不适用于Angular Js中的文件输入

【英文标题】：Required attribute Not working with File input in Angular Js

【发布时间】：2013-04-18 21:38:58

【问题描述】：

我的表单中有一个文件上传控件。我正在使用 Angular JS。 当我输入所需的属性来验证文件是否被选中时，它不起作用。

<input id="userUpload" name="userUpload" required type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

<button type="submit" class="btn btn-primary"><i class="icon-white icon-ok"></i>&nbsp;Ok</button>

能否请您提出所需的为什么不起作用？

【参考方案1】：

ngModelController 在 Angular 中根据 require 等属性进行验证。但是，目前不支持使用 ng-model 服务的 input type="file"。为了让它工作，你可以创建一个这样的指令：

app.directive('validFile',function()
  return 
    require:'ngModel',
    link:function(scope,el,attrs,ngModel)
      //change event is fired when file is selected
      el.bind('change',function()
        scope.$apply(function()
          ngModel.$setViewValue(el.val());
          ngModel.$render();
        );
      );
    
  
);

示例标记：

  <div ng-form="myForm">
    <input id="userUpload" ng-model="filename" valid-file name="userUpload" required type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
    <button ng-disabled="myForm.$invalid" type="submit" class="btn btn-primary"><i class="icon-white icon-ok"></i>&nbsp;Ok</button>
    <p>
      Input is valid: myForm.userUpload.$valid
      <br>Selected file: filename
    </p>
  </div>

查看my working plnkr example。

【讨论】：

我已经为 IE 包含了 SHIV。我要输入这段代码。这行得通吗？

我什至不知道你的代码是做什么的——我的 sniplet 应该是 IE8 兼容的。包括它，测试它，如果它在 IE8 中不起作用，请创建一个新问题

你可以在 IE8 中测试run.plnkr.co/CEMX0RY3MX1TbcSZ（我刚刚做了，效果很好）

您的示例在 jQuery 中引发了异常。

@JonRimmer 这是指令***.com/questions/18383446/…中的一个小错误

【参考方案2】：

扩展@joakimbl 代码我会建议这样的直接

.directive('validFile',function()
    return 
        require:'ngModel',
        link:function(scope,el,attrs,ctrl)
            ctrl.$setValidity('validFile', el.val() != '');
            //change event is fired when file is selected
            el.bind('change',function()
                ctrl.$setValidity('validFile', el.val() != '');
                scope.$apply(function()
                    ctrl.$setViewValue(el.val());
                    ctrl.$render();
                );
            );
        
    
)

在html中你可以这样使用

<input type="file" name="myFile" ng-model="myFile" valid-file />
<label ng-show="myForm.myFile.$error.validFile">File is required</label>

【讨论】：

这有点奇怪，但是正确使用您的代码将 myForm.myFile.$error.validFile 设置为 true，但 ng-show 不起作用。使用myForm.myFile.$invalid 工作正常。我不明白为什么。我的角度检查器将 validFile 显示为 true...

好的，我明白了...我将validFile更改为valid-file，我正在寻找myForm.myFile.$error.valid减去file