必需屬性不適用於Angular Js中的文件輸入

我在表單中有一個文件上傳控件。我正在使用Angular JS。當我把必要的屬性驗證文件被選中時，它不起作用。必需屬性不適用於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>

您能否建議爲什麼要求不起作用？

來源

2013-04-25 Moiz

這是ngModelController，根據屬性如require在Angular中進行驗證。但是，目前不支持使用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。

來源

2013-04-25 07:33:22 joakimbl

將這項工作？ – Moiz 2013-04-25 08:08:44

是的，如果你遵循的角度ie指南http://docs.angularjs.org/guide/ie – joakimbl 2013-04-25 08:11:53

我已經包括SHIV的IE瀏覽器。我打算把這個代碼放在這個工作上？ – Moiz 2013-04-25 08:13:14

擴展@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中你可以使用像IE 8及以上這個

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

來源

2015-08-20 07:19:29 FarazShuja

這有點奇怪，但使用你的代碼正確設置'myForm.myFile。$ error.validFile'爲true，但ng-show不起作用。使用'myForm.myFile。$ invalid'工作正常。我不明白爲什麼。我的角度檢查器顯示validFile爲真... – 2015-09-11 08:26:33

好吧，我知道了...我將validFile更改爲有效文件，並且正在尋找'myForm.myFile。$ error.valid'減去'file' – 2015-09-11 08:29:14

必需屬性不適用於Angular Js中的文件輸入

回答

相關問題