Angular - - form.FormController、ngModel.NgModelController

form.FormController

FormController跟踪所有他所控制的和嵌套表单以及他们的状态,就像有效/无效或者脏值/原始。

每个表单指令创建一个FormController实例。

方法

$addControl();

给表单注册一个控制器。

使用了ngModelController的输入元素会在连接时自动执行。

$removeControl();

给表单注销一个控制器。

使用了ngModelController的输入元素会在注销时自动执行。

$setValidity();

给表单设置表单控制器的有效性。

此方法也将传播到父表单。

$setDirty();

给表单设置一个脏状态。

这个方法将被调用去添加类“ng-dirty”,给表单设置一个脏状态。这个方法将传到父表单。

$setPristine();

将表单设置为原始状态。

这种方法被调用去删除类“ng-dirty”,给表单设置初始状态。这个方法将传到父表单。

属性:

$pristine

如果用户和表单尚未进行交互,则为true。

$dirty

如果用户和表单已进行交互,则为true。

$valid

所有的表格和控制器都是验证有效,则为true。

$invalid

如果至少有一个控件或表单验证无效,则为true。

$error

是一个hash对象,包含引用无效的控制器或表单。

ngModel.NgModelController

ngModel.NgModelController为ng-model指令提供了API。该控制器包含数据绑定,验证,CSS更新服务,和值的格 式化和解析。它很明确的不包含任何逻辑处理,DOM渲染或者监听事件。这种的DOM相关的逻辑应该由其他使用NgModelController进行数据 绑定指令提供。

方法

$render();

当视图需要更新时调用。

$isEmpty(value);

当我们需要判断input的值是否为空时可执行。例如, input的值是否存在,则需要的指令执行此函数。默认的$isEmpty函数检查值是否是“undefined”、“”、null或者NaN。

Value:检查的引用。

$setValidity(validationErrorKey,isValid);

改变有效性的状态,并通知表单当控制器的有效性发生变化。(如果验证器已经被标记为无效,则不通知表单。)

在需要验证的时候这种方法被调用---即分析器或格式化功能。

validationErrorKey:验证器的名称。validationErrorKey将会被分配给$error[validationErrorKey ] =isValid,这样就可以进行数据绑定了。

isValid:当前状态是否是valid(true)或者invalid(false)。

$setPristine();

设置控制器初始化状态。

$setViewValue(value);

更新页面的值。

当页面上的值发生变化时,这个方法被调用。

value:页面上的值。

属性

$viewValue

页面上实际的字符串值。

$modelValue

模型中控制器绑定的的该值。

$parsers

执行的功能的数组,作为一个控制器从DOM读取值的管道。每一个函数被调用去传递值到下一个,最后返回值用于填充模型。用于净化/转换或者验证值。为了验证,解析器应该使用$setvalidity()更新有效状态,并返回未定义的无效值。

$formatters

执行的功能的数组,作为一个控制器从DOM读取值的管道。每一个函数被调用去传递值到下一个,最后返回值用于填充模型。用于的格式化/转换在控制器和验证中显示的值。

$viewChangeListeners

当页面上值变化时所执行的函数的数组。它没有参数被执行,它的返回值被忽略。这可以用来代替对模型值额外的监听。

$error

带有所有错误的hash对象。

$pristine

用户还没有与控制器交互,则为true。

$dirty

用户已经与控制器交互,则为true。

$valid

如果没错误,则为true。

$invalid

控制器上至少有一个错误,则为true。

使用代码:

  div[contenteditable] { border: 1px solid black; background-color: white; min-height: 24px; width: 200px; margin-top: 20px; }
  .myDiv { float: left; display: block; margin-left: 30px; }

  <div ng-app="Demo">
      <div ng-controller="testCtrl as ctrl">
          <div class="myDiv">
              <div content-editable strip-br="true" ng-model="ctrl.userContent">Hello World!</div>
          </div>
          <div class="myDiv">
              <textarea ng-model="ctrl.userContent" style="min-height: 240px"></textarea>
          </div>
      </div>
  </div>

  (function () {
    angular.module("Demo", ["ngSanitize"])
    .directive("contentEditable", contentEditable)
    .controller("testCtrl",angular.noop);
    function contentEditable() {
       return {
           restrict: "A",
           require: "?ngModel",
           link: function (scope, element, attrs, ngModel) {
               if (!ngModel) return;
               ngModel.$render = function () {
                 element.html(ngModel.$viewValue || "");
               };
               element.on("blur keyup change", function () {
                   scope.$apply(read);
               });
               read();
               function read() {
                   var html = element.html();
                   if (attrs.stripBr && html == "<br />") {
                       html = "";
                   }
                   ngModel.$setViewValue(html);
               }
           }
       };
   }
  }());

上面对于FormController的那些属性,可以作为angular表单验证的判断。对于下面的NgModelController,用的不多,不过几个方法和属性在指令中还是挺方便使用的,感觉这种操作也和jquery操作相似。

时间: 2024-11-05 15:45:01

Angular - - form.FormController、ngModel.NgModelController的相关文章

野兽的Angular Api 学习、翻译及理解 - - form.FormController、ngModel.NgModelController

野兽的ng api学习 -- form.FormController.ngModel.NgModelController form.FormController FormController跟踪所有他所控制的和嵌套表单以及他们的状态,就像有效/无效或者脏值/原始. 每个表单指令创建一个FormController实例. 方法: $addControl(); 给表单注册一个控制器. 使用了ngModelController的输入元素会在连接时自动执行. $removeControl(); 给表单注

野兽的Angular Api 学习、翻译及理解 - - ngCloak、ngController、ngInit、ngModel

野兽的 ng api 学习 -- ngCloak.ngController.ngInit.ngModel ngCloak ngCloak指令是为了防止Angular应用在启动加载的时候html模板将会被短暂性的展示.这个指令可以用来避免由HTML模板显示造成不良的闪烁效果. 格式: ng-cloak   class=“ng-cloak“ 使用代码: <div ng-cloak>{{'Hello World'}}</div> <div class="ng-cloak&

angular之$watch、$watchGroup、$watchCollection

1,原型:$watch: function(watchExp, listener, objectEquality, prettyPrintExpression){}: 2,参数:watchExp(必须):{(function()|string)},可以字符串表达式,也可以带当前scope为参数的函数 - `string`: Evaluated as {@link guide/expression expression} - `function(scope)`: called with curre

angular之$broadcast、$emit、$on传值

文件层级 index.html <!DOCTYPE html> <html ng-app="nickApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"

angular 的 @Input、@Output 的一个用法

angular 使用 @input.@Output 来进行父子组件之间数据的传递. 如下: 父元素: <child-root parent_value="this is parent value" (child_emit)="test()"></child-root> 父元素标签中有一个属性是,parent_value,在子元素中可以使用该值: <p [title]="parent_value" >this p

django之form组件、cookie、session

django之form组件.cookie.session django form组件 1.渲染标签 2.校验数据 3.展示信息 校验数据 # 第一步需要一个form类 from django import forms class MyForm(forms.Form): name = forms.CharField(max_length=8) password = forms.CharField(max_length=8,min_length=3) email = forms.EmailField

[Angular Form] ngModel and ngModelChange

When using Radio button for Tamplate driven form, we want to change to the value change and preform some action. import { Component, Input } from '@angular/core'; import { Passenger } from '../../models/passenger.interface'; @Component({ selector: 'p

Angular - - ngCloak、ngController、ngInit、ngModel

ngCloak ngCloak指令是为了防止Angular应用在启动加载的时候html模板将会被短暂性的展示.这个指令可以用来避免由HTML模板显示造成不良的闪烁效果. 格式: ng-cloak   class=“ng-cloak“ 使用代码: <div ng-cloak>{{'Hello World'}}</div> <div class="ng-cloak">{{'Hello World'}}</div> ng有两种绑定数据到页面的写

野兽的Angular Api 学习、翻译及理解 - - ngIf、ngSwitch、ngHide/ngShow

野兽的 ng api 学习 - - ngIf.ngSwitch.ngHide/ngShow 在组合这些ng指令写到一篇文章里的时候,基本是有规则的,野兽把功能相似相近的一类大多会组合到一起,方便理解和记忆. 这篇的三个指令也都是对DOM元素的操作,页面上显示/隐藏的判断,添加/移除的判断. ngIf ngIf指令会根据指定的表达式返回的boolean类型值对该元素做添加到/移除出Dom树的操作. 格式:ng-if=“value” value:表达式  返回结果为boolean类型. 使用代码: