Wymagany atrybut Nie działa z plikiem wejściowym w Angular Js

Question

Mam kontrolę przesyłania plików w mojej formie. Używam Angular JS. Po wstawieniu wymaganego atrybutu do sprawdzenia, czy plik jest zaznaczony, nie działa.

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

Czy możesz zasugerować, dlaczego wymagane nie działa?

Answer 1

To jest ngModelController, który dokonuje walidacji w Angular na podstawie atrybutów takich jak require. Jednak obecnie nie ma obsługi dla input type="file" z usługą ng-model. Aby dostać pracę można stworzyć dyrektywę tak:

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

Przykład znaczników:

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

Answer 2

Rozszerzanie kod @joakimbl będę sugerować bezpośredni jak ten

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

w html jak można użyć tego

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