• Angular


    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;  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操作相似。

  • 相关阅读:
    3.1 创建模型-实体属性
    3. 创建模型
    2.1 DbContext
    2. EF Core 如何显示执行的SQL语句
    1.1 为现有数据库生成实体模型
    1. EF Core 概述
    【2020-08-01】人生十三信条
    【一句日历】2020年8月
    【2020-07-31】一个像我一样精力充沛的孩子
    【2020-07-30】强大内心是自己的义务
  • 原文地址:https://www.cnblogs.com/koleyang/p/5054013.html
Copyright © 2020-2023  润新知