如何在angularjs中使用输入[type=file]验证表单
How to validate form with input[type=file] in angularjs
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。你知道我为什么会出现这个错误以及如何解决这个问题吗?
来自NgModelController的引用$render()
在需要更新视图时调用预计ng模型指令的用户将实现此方法
你需要实现$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());
});
});
}
};
相关文章:
- 正在将base64 jpeg从input-type=file上传到服务器
- 有没有什么方法可以通过输入字段(type=file)来找出选择了多少个文件
- 如何检查输入type=“file”是否选择了文件
- 在JSP中使用HTML type=file上传文件,并在上传前在javascript中执行一些检查
- 我可以使用任何 HTML 或 JavaScript API 在 input[type=file] 中获取文件的路径吗?
- 如何在angularjs中使用输入[type=file]验证表单
- 如何将javascript FileReader对象附加到html输入[type=“file”]元素
- 使用php发送文件,不使用POST,但使用type=file
- 如何获取和设置输入type=file的路径
- input-type=file onchange事件未在googlechrome/ffirefox中启动
- 如何更改input type="file"的按钮文本元素
- On select Input type="file"更改输入类型"文本"
- 上传文件输入[type="file"],没有第二个按钮发送
- 如何在输入字段type= " file "时添加引导工具提示
- 哪些浏览器支持在input[type="file"]元素上触发click事件
- 如何通过API更改本地文件的视频源"input type='file'“;没有Jquery或外
- Why "HTML <input type='file' />" has
- HTML5 input type="file" doesn't trigger handle
- 在输入[type=file]时使用click()出现问题
- 创建您自己版本的输入[type=file]