आवश्यक विशेषता Angular Js

Question

में फ़ाइल इनपुट के साथ काम नहीं कर रहा है मेरे पास मेरे फॉर्म में एक फ़ाइल अपलोड नियंत्रण है। मैं कोणीय जेएस का उपयोग कर रहा हूं। जब मैं आवश्यक विशेषता डालता हूं कि फ़ाइल को चुना गया है तो यह काम नहीं कर रहा है।

<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

यह ngModelController है जो require जैसे गुणों के आधार पर कोणीय में सत्यापन करता है। हालांकि, वर्तमान में एनजी-मॉडल सेवा के साथ 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

@joakimbl कोड का विस्तार मैं इस

.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 में आप इस

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