Jak walidacji formularza z wejściem [type = file] w angularjs

Question

HTML: Dyrektywa

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

niestandardowa do słuchania dla wejścia [type = file] Zmiany:

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

Kiedy plik zostanie wybrany po pojawia się błąd w konsoli:

Error: InvalidStateError: DOM Exception 11 Error: An attempt was made to use an object that is not, or is no longer, usable.

spróbuj plunkr: http://plnkr.co/edit/C5j5e0JyMjt9vUopLDHc?p=preview

Bez tej dyrektywy stan pola pliku wejściowego nie zostanie naciśnięty do formularza. $ Valid. Jakieś pomysły, dlaczego dostaję ten błąd i jak to naprawić?

Answer 1

Od odniesienia NgModelController.$render()

Called when the view needs to be updated. It is expected that the user of the ng-model directive will implement this method.

Trzeba wdrożyć $ render(), aby go nazwać. Można zrobić coś takiego

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

Answer 2

Po aktualizacji do angularjs 1.2.x urywek nie wygląda już działa poprawnie i wejście plik nie robi laski przy wybranej wartości pliku czyniąc formularz bezużytecznym. Zmiana dyrektywy z powrotem do swojego pierwotnego i usuwanie ngModel.$render() wygląda działa jak czar:

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