細說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更合適。