Come per convalidare forma con l'input [type = file] in angularjs

Question

HTML: direttiva

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

personalizzato per ascoltare l'input [type = file] modifiche:

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

Quando si seleziona il file seguente errore viene visualizzato nella console:

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

Prova con plunkr: http://plnkr.co/edit/C5j5e0JyMjt9vUopLDHc?p=preview

Senza la direttiva lo stato del campo del file di input non verrà inserito nella forma. $ Valido. Qualche idea per cui ottengo questo errore e come risolverlo?

Answer 1

dal riferimento di 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.

È necessario implementare $ render() per chiamarlo. Si può fare qualcosa di simile

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

Dopo l'aggiornamento a AngularJS 1.2.x il frammento non sembra funziona più correttamente e il file di input non lo fa bastoni con il valore di file selezionato, rendendo il modulo inutilizzabile. Modifica della direttiva di nuovo al vostro originale, e la rimozione del ngModel.$render() sembra lavorare come un fascino:

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