细说angular Form addControl方法
在本篇博文中,我们将接触angular的验证。angular的验证是由form 指令和ngModel协调完成的。今天博主在这里想要说的是在验证在的一种特殊情况,当验证控件没有没有name属性这是不会被form捕获的。或者是你希望在ngRepeat中使用动态表达式。
下面且让我们先来从angular源码中看起如下:
首先是ngModel:
var ngModelDirective = function() {
return {
require: ['ngModel', '^?form'],
controller: NgModelController,
link: function(scope, element, attr, ctrls) {
// notify others, especially parent forms var modelCtrl = ctrls[0],
formCtrl = ctrls[1] || nullFormCtrl; formCtrl.$addControl(modelCtrl); scope.$on('$destroy', function() {
formCtrl.$removeControl(modelCtrl);
});
}
};
};
从上面我们能够看出ngModel指令会在编译时期的post link阶段会通过form的 addControl方法把自己的controller注册到父节点上的form的formController中。
在看看ngModel controller初始化代码:
var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$parse',
function($scope, $exceptionHandler, $attr, $element, $parse) {
....
this.$pristine = true;
this.$dirty = false;
this.$valid = true;
this.$invalid = false;
this.$name = $attr.name;
我们从上面我们可以看到 ngModel的$name属性并不支持表达式计算。
而FormController的addControl代码则是:
/**
* @ngdoc function
* @name ng.directive:form.FormController#$addControl
* @methodOf ng.directive:form.FormController
*
* @description
* Register a control with the form.
*
* Input elements using ngModelController do this automatically when they are linked.
*/
form.$addControl = function(control) {
// Breaking change - before, inputs whose name was "hasOwnProperty" were quietly ignored
// and not added to the scope. Now we throw an error.
assertNotHasOwnProperty(control.$name, 'input');
controls.push(control); if (control.$name) {
form[control.$name] = control;
}
};
从上面我们可以清楚的看见虽然ngModel注册了自己,但是这里也不一定能注册成功,ngModel心必须有自己的$name才能被注册成功。
从上面的代码中可以得出,当我们的验证失效的时候,我们可以有一个万能的方式就是 手动注册到form controller
手动注册form controller
为了我写了一个dy-name的插件,其会在post link阶段解析表达式,并把自己注册到父form controller。
如下:
.directive("dyName", [ function() {
return {
require: "ngModel",
link: function(scope, elm, iAttrs, ngModelCtr) {
ngModelCtr.$name = scope.$eval(iAttrs.dyName)
var formController = elm.controller('form') || {
$addControl: angular.noop
};
formController.$addControl(ngModelCtr); scope.$on('$destroy', function() {
formController.$removeControl(ngModelCtr);
}); }
};
}
])
使用方式:
<div ng-repeat="item in demo.fields">
<div class="control-group">
<label class="control-label"> : </label>
<div class="controls">
<input type="number" dy-name="item.field" ng-model="demo.data[item.field]" min="10" max="500" ng-required="true"/>
</div>
</div>
</div>
其实实现为在post link阶段获取到form controller,并把自己注册到form controller,而且为了消除对象的级联,将会在scope摧毁阶段remove自己。
其效果请看jsbin $addControl
注意:在formController.$addControl方法的参数传入的不是界面控件,而是ngModelController.或者名字为$addController更合适。
细说angular Form addControl方法的更多相关文章
- AngularJS form $addControl 注冊控件control
需求背景: 在form中使用编写的某component directive时.想通过form's name来对form中控件进行操作, 如使用$invalid等来ng-disabled btn. 解决 ...
- ASP.NET 中HTML和Form辅助方法
Form辅助方法 Form最重要的属性就是action和method,action指明form中的数据被提交到哪里,method指明用什么方法,默认为GET,下面是一个简单的例子: <form ...
- Django form表单功能的引用(注册,复写form.clean方法 增加 验证密码功能)
1. 在app下 新建 forms.py 定义表单内容,类型models from django import forms class RegisterForm(forms.Form): userna ...
- 让Easy UI 的DataGrid直接内嵌的JSON对象,并重写form load 方法
前言 我有这样的JSON对象 { "UserName": "jf", "UserPwd": "123456", &quo ...
- angular 封装公共方法
angular封装公共方法到service中间件,节省开发时间 layer.service.ts openAlert(callback) {// 传递回调函数 const dialogRef = th ...
- 实现同时提交多个form(基础方法) 收集
实现同时提交多个form(基础方法) 收集 分类: 1.2-JSP 1.3-J2EE 1.1J2se 1.0-Java相关2011-12-01 20:59 1644人阅读 评论(0) 收藏 举报 bu ...
- form.submit 方法 并不会触发 form.onsubmit 事件
做表单的时候发现一个奇怪的地方,总结下: form.submit 方法 并不会触发 form.onsubmit 事件,看代码: <body> <div class="con ...
- vue + elementui form resetFields方法 无法重置表单
this.$refs['form'].resetFields(); 方法无法重置.1 el-form 组件 没有添加 ref 属性 <el-form ref="form" : ...
- AngularJS的核心对象angular上的方法全面解析(AngularJS全局API)
总结一下AngularJS的核心对象angular上的方法,也帮助自己学习一下平时工作中没怎么用到的方法,看能不能提高开发效率.我当前使用的Angularjs版本是1.5.5也是目前最新的稳定版本,不 ...
随机推荐
- 解决织梦channel标签 指定typeid或设置son时 currentstyle无效的修复办法
{dede:channel type='son' row='8' currentstyle="<li><ahref='~typelink~' class='thisclas ...
- Intelij IDEA 2016.3安装mybatis插件并激活教程
转载自:http://blog.csdn.net/solo_talk/article/details/53540449 现在Mybatis框架越来越受欢迎,Intelij IDEA这个编辑器逐渐成为很 ...
- AngularJS的小知识点
小知识点:$scope和$rootScope (1)每次使用ngController指令,都会调用控制器的创建函数,创建出一个控制器对象. (2)每次创建一个控制器对象,AngularJS都会创建一个 ...
- css3中的字体样式
text-overform:ellipsis省略号/clip裁剪. overform:hidden溢出隐藏文字. 但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省 ...
- UIScrollView的三个属性
contentSize.contentOffset.contentInset UIScrollView的frame的size 指的是可视范围 contentSize 内容大小,滚动的范围 创 ...
- Spring 学习笔记 2. 尚硅谷_佟刚_Spring_IOC&DI概述
1,远古时代 这里讲述的IOC的演变历史,举一个例子,假如需要生成HTML和PDF格式的报表,以前的开发方式就是有个报表服务类需要使用报表生成器 它需要和其他三个都关联,它既需要知道接口类型,也需要知 ...
- MATLAB-octave中向量场图的可视化
参考http://379910987.blog.163.com/blog/static/33523797201162223310546/ 设二维函数z=f(x,y),其中z为海拔,x为东西测向距离而y ...
- CSS伪类选择器
一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
- 用cookie记住用户名
有时候,我们在做登陆框时会有个复选框选择请记住我,或者有时候会遇到一些弹出框说下次不再提醒,此功能我们可以用js中的cookie实现此功能 下面记录一下如何实现该功能: 利用cookie记录用户名 1 ...
- Android中的IntentService
首先说下,其他概念:Android中的本地服务与远程服务是什么? 本地服务:LocalService 应用程序内部------startService远程服务:RemoteService androi ...