现在的位置: 主页 > 新闻中心 > 文章正文

细说angular Form addControl方法

作者:武警河南洛阳红丝带网 来源:www.027fck.com 未知发布时间:2017-09-02 11:53:37
细说angular Form addControl方法 在本篇博文中,我们将接触angular的验证。angular的验证是由form 指令和ngModel协调完成的。今天博主在这里想要说的是在验证在的一种特殊情况,当验证控件没有没有name属性这是不会被form捕获的。或者是你希望在ngRepeat中使用动态表达式。

下面且让我们先来从angular源码中看起如下:

首先是ngModel:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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">

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:十堰SEO http://shiyan.4567w.com

上一篇:JSP+servlet生成验证码并验证 下一篇:最后一页