필수 특성 각도 J의 파일 입력과 함께 작동하지 않습니다.

필수 특성 각도 J의 파일 입력과 함께 작동하지 않습니다.

제 양식에 파일 업로드 컨트롤이 있습니다.저는 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>

왜 필수품이 작동하지 않는지 제시해주시겠습니까?

Angular에서 다음과 같은 속성을 기반으로 검증을 수행하는 것은 ngModelController입니다.require. 그러나 현재는 지원이 없습니다.input type="file"ng-model service와.이를 작동시키기 위해 다음과 같은 지시문을 작성할 수 있습니다.

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>

제 작업 예를 확인해 보세요.

@joakimbl code 확장하기 이렇게 다이렉트를 제안하겠습니다.

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

언급URL : https://stackoverflow.com/questions/16207202/required-attribute-not-working-with-file-input-in-angular-js