Attributo richiesto Non funziona con l'input di file in J angular

Question

Ho un controllo di caricamento file nel mio modulo. Sto usando Angular JS. Quando inserisco l'attributo richiesto per verificare che il file sia selezionato, non funziona.

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

Potete suggerire per favore perché il richiesto non funziona?

Answer 1

È lo ngModelController che esegue la convalida in Angolare in base a attributi come require. Tuttavia, attualmente non è disponibile il supporto per input type="file" con il servizio ng-model. Per farlo funzionare è possibile creare una direttiva come questa:

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

Esempio di marcatura:

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

Partenza my working plnkr example.

Answer 2

Estendere codice @joakimbl suggerirò la diretta come questo

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

e in html è possibile utilizzare in questo modo

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