angularjs에서 입력[type=file]로 폼을 검증하는 방법

angularjs에서 입력[type=file]로 폼을 검증하는 방법

HTML:

<form name="form">
    <input type="file" ng-model="document" valid-file required>
    <input type="submit" value="{{ !form.$valid && 'invalid' || 'valid' }}">
</form>

입력[type=file] 변경 내용을 수신하는 사용자 지정 지시어:

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

파일을 선택하면 콘솔에 다음과 같은 오류가 나타납니다.

오류: InvalidStateError: DOM Exception 11 오류:사용할 수 없거나 더 이상 사용할 수 없는 개체를 사용하려고 시도했습니다.

plunkr로 시도해 보십시오: http://plnkr.co/edit/C5j5e0JyMjt9vUopLDHc?p=preview

지시어가 없으면 입력 파일 필드의 상태가 형식으로 푸시되지 않습니다.달러 valid.이 오류가 발생하는 이유와 해결 방법을 알고 있습니까?

NgModelController 참조.$render()

보기를 업데이트해야 할 때 호출됩니다.ng-model 명령의 사용자가 이 방법을 구현할 것으로 예상됩니다.

$render()를 구현해야 호출할 수 있습니다.당신은 이런 것을 할 수 있습니다.

myApp.directive('validFile', function () {
    return {
        require: 'ngModel',
        link: function (scope, el, attrs, ngModel) {
            ngModel.$render = function () {
                ngModel.$setViewValue(el.val());
            };

            el.bind('change', function () {
                scope.$apply(function () {
                    ngModel.$render();
                });
            });
        }
    };
});

DEMO

AngularJS 1.2.x로 업데이트한 후 스니펫이 더 이상 제대로 작동하지 않는 것처럼 보이고 파일 입력이 선택한 파일 값과 맞지 않아 양식을 사용할 수 없습니다.명령어를 원래 명령어로 다시 변경하고 삭제합니다.ngModel.$render()매력적으로 보입니다.

.directive('validFile', function () {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function (scope, el, attrs, ngModel) {
      el.bind('change', function () {
        scope.$apply(function () {
          ngModel.$setViewValue(el.val());
        });
      });
    }
  };

언급URL : https://stackoverflow.com/questions/18383446/how-to-validate-form-with-inputtype-file-in-angularjs