Erforderliches Attribut Arbeitet nicht mit Dateieingabe in Angular Js

Question

Ich habe ein Steuerelement zum Hochladen von Dateien in meiner Form. Ich verwende Angular JS. Wenn ich das erforderliche Attribut einfüge, um zu bestätigen, dass die Datei ausgewählt ist, funktioniert es nicht.

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

Können Sie bitte vorschlagen, warum die erforderliche nicht funktioniert?

Answer 1

Es ist die ngModelController, die die Validierung in Angular basierend auf Attributen wie require durchführt. Derzeit gibt es jedoch keine Unterstützung für input type="file" mit dem ng-Modell-Dienst. Um es zu erhalten arbeiten Sie eine Richtlinie wie diese schaffen könnte:

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

Beispiel Markup:

<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

@joakimbl Code Erweiterung Ich werde die direkte ähnliche

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

vorschlagen und in HTML können Sie dieses verwenden

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