如何在angularjs中使用input [type = file]验证表单

Question

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异常11错误:尝试使用不可用或不再可用的对象.

尝试使用plunkr:http://plnkr.co/edit/C5j5e0JyMjt9vUopLDHc？p = preview

如果没有指令,输入文件字段的状态将不会被推送到.$ valid.任何想法为什么我得到这个错误以及如何解决这个问题？

Answer 1

来自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