必須属性Angular Jsのファイル入力では機能しません

Question

私のフォームにファイルアップロードコントロールがあります。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> 

必要なものが動作しない理由をお聞かせください。

Answer 1

requireのような属性に基づいて角度で検証するのはngModelControllerです。しかし、現在、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をチェックしてください。

Answer 2

私は、直接この

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