Thuộc tính bắt buộc Không hoạt động với Đầu vào tệp trong Angular Js

Question

Tôi có quyền kiểm soát tải lên tệp trong biểu mẫu của mình. Tôi đang sử dụng JS Angular. Khi tôi đặt thuộc tính bắt buộc để xác nhận rằng tệp được chọn, nó sẽ không hoạt động.

<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> 

Bạn có thể vui lòng cho biết lý do yêu cầu không hoạt động?

Answer 1

Đó là số ngModelController xác thực trong Góc dựa trên các thuộc tính như require. Tuy nhiên, hiện tại không có hỗ trợ cho input type="file" với dịch vụ ng-model. Để có được nó làm việc bạn có thể tạo ra một chỉ thị như thế này: đánh dấu

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(); 
     }); 
     }); 
    } 
    } 
}); 

Ví dụ:

<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> 

Check-out my working plnkr example.

Answer 2

Mở rộng đang @joakimbl tôi sẽ đề xuất trực tiếp như thế này

.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(); 
       }); 
      }); 
     } 
    } 
}) 

và trong html bạn có thể sử dụng như thế này

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