java form model_[Java教程]form 和 ngModel

[Java教程]form 和 ngModel

0 2014-08-16 17:00:18

参考

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

https://docs.angularjs.org/api/ng/type/form.FormController

angular 提供了表单指令，它和ngModel 经常一起工作，所以一起介绍。

我们先来了解一下基本的ng-model

ng-model 用来同步elem & scope 的数据

ng-model 在不同的element上会有不同的同步模式，这些angular已经帮我封装了许多.

当然 angular 也提供了一些方法在 ngModel 这个指令的 controller中(名为 ngModel)，使得我们可以扩张自己的控件 (比如 : checkBoxList, dropDownList 等)

此外 ng-model 还有一些基本 option 可以设置(1.3才有)

user.name = 

updateOn 写入一个事件名来表示我们希望什么事件促使这个elem被更新，比如 blur / keyup 等

debounce 是deley update 毫秒, 一般我们不希望用户联系每一次keydown时都更新，而是等到用户停止输入时才执行一次更新。就可以放一个delay 实现了

getterSetter = true 可以用在依赖属性上，比如我们的$scope.name = function (){ retrun xx; } 当name是个方法的时候

我们再来看看 ng-model controller 还有些什么属性方法

ngModel controllervar ngModelController = { "$viewValue": "12", //界面显示的数据 "$modelValue": "12", //$scope的value "$parsers": [null, null], //这里的null是因为json无法看到，是 function 来的 "$formatters": [null, null], "$viewChangeListeners": [null], "$pristine": false, "$dirty": true, "$valid": true, "$invalid": false, "$name": "name", "$error": { "required": false, //这里是true代表有error , valid fail "minlength": false }, "$$validityState": {} //私有属性不详 }

$parsers, $formatters 是数据拦截

每一次view同步去scope时，会触发$parsers里头所有的方法, 我们可以在方法中对数据做一些处理，比如验证或者装换. $formatters 则是 scope to view 时触发

$viewChangeListeners 官网的说明是

Array of functions to execute whenever the view value has changed. 每一次view value change 触发

It is called with no arguments, and its return value is ignored. //no para , no return

This can be used in place of additional $watches against the model value. //用途不是很明白

$dirty , $valid 等，都是配合表单使用的，表单会对这个值总一些统计的工作。

还有一些方法 :

"$render",

"$isEmpty",

"$setValidity", //常用的应该是这个， para(验证指令, isValid)

"$setPristine",

"$setViewValue"

在创建自己的控件时，比如 checkBoxList 时，我们可能会有很多个checkBox，但是model的value只有一个，我们通过自己写的事件等，调用controller 的 $render 等等，去进行 model 同步

$setValidity 是用于和表单验证通讯的 .

这里给一个自定义验证指令的例子

{{ emailForm.$valid }}

angular.module("app", []). directive("isAbc", ["$timeout", function ($timeout) { return { restrict: "A", require: "ngModel", link: function ($scope, $element, $attrs, $ctrl) { var validator = function (v) { $timeout.cancel($ctrl.timeout); $ctrl.timeout = $timeout(function () { if (v == "abc") { $ctrl.$setValidity('isAbc', true); return v; } else { $ctrl.$setValidity('isAbc', false); return undefined; } }, 2000); } $ctrl.$parsers.push(validator); } } }]);

这里我们创建了一个 is-abc 指令，我们拦截了ngModel，添加了验证手法，通过 $setValidity 通知 form , 这里还做了一个延迟验证的手法。

ng-form || form 指令

ng-form 和 form 是一样的，controller 名字是 form

{{ emailForm.$valid }}

form 有一些规范，一定要有name , 里面的控件也都要有 name , 最好都用ng-model沟通，因为angular封装了自动添加controller 等等的事儿 .

流程大致上是这样,

form -> model -> 验证指令

指令通过拦截model做验证等，通过model告知form

form controller 有一些属性var formController = { "$name": "emailForm", "$dirty": false, //form被动过 "$pristine": true, //form没人动过 "$valid": false, //全部验证pass "$invalid": true, //有fail的 "email": {}, //key是form里头的控件nama,value是 控件 ngModel controller 对象, "$error": {"required" : []} //key 是 error 指令名字，value是一个数组,里面是invalid控件的 ngModel controller对象 }

主要是收录了表单内控件的 ng-model controller 引用

form 中的方法

"$addControl", //添加ngModel controller ,ngModel会自动添加，除非自定义指令或许会用上

"$removeControl",

"$setValidity",  para(验证指令, isValid, ngModel controller) set ngModel的valid

"$setDirty", no para , set属性

"$setPristine" no para , set属性

调用angular 提供的方法，它们会让form model parent等串联起来 .

本文网址：http://www.shaoqun.com/a/98521.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

0