angularjs - $validators 和 $setValidity 有什么意义？

Question

我想我遗漏了 $validators 和 $setValidity 的东西(据我所知，做完全相同的事情所以你不需要两者 - 请更正如果我错了，我)。无论我是否有 $validators 语句，我都会将 ng-invalid 类添加到输入表单中，这会在输入周围添加一个红色边框。那么为什么我需要 $validators？如果用户没有从指令模板的下拉列表中选择一行，我试图将父表单设置为无效。我不想显示任何错误消息或任何内容，我只想根据是否选择了下拉列表中的行来添加无效类和红色边框。

我应该使用 $validators 还是 $setValidity？我是否需要像下面那样同时使用 $validator 和 $setValidity？另外，$setValidity 是否需要 ngModelCtrl？如果 setValidity 不在 $validators 函数内，我会得到 undefined。感谢您的帮助。

如果我想在没有选择的情况下使父表单整体无效，并且当我触摸时我得到 ng-invalid 类，然后如果没有选择 $validators 和$setValidity，那么为什么我需要 $validators 和 $setValidity？？

index.html

   <form name="myForm">
      <validator 
         rows="[{name:'tom', city:'san fran', state: 'mn', zip: 34212},
               {name: 'joe', city:'san fran', state: 'mn', zip: 45675}]"
         ng-required="true"
         ng-model="hey">
      </validator>
  </form>

validate.js - DDO

   return {
      restrict: 'E',
      require: {
      ngModelCtrl: 'ngModel',
      formCtrl: '?^form'
   },
      replace: true,
      templateUrl: 'view.html',
      scope: {},
      controllerAs: 'ctrl',
      bindToController: {
         rows: '=',
         onSelected: '&?', //passsed selected row outside component
         typedText: '&?', //text typed into input passed outside so 
                          //developer can create a custom filter,
                          //overriding the auto
         textFiltered: '@?', //text return from the custom filter
         ngRequired: "=?" //default false, when set to true the component
             //needs to validate that something was selected on blur.
             //The selection is not put into the input element all the
             //time so it can't validate based on whether or not
             //something is in the input element itself. 
             //I need to validate inside the controller where I can see
             //if 'this.ngModel' (selectedRow - not passed through scope)
             //is undefined or not.
        },
         controller: 'validatorController'
  };

.

   function validatorController () {
         var ctrl = this;
         var rowWasSelected = false;
         var input = ctrl.formCtrl.inputField; 

         //called via ng-click on the dropdown row
         //if this is called a row was selected
         ctrl.rowSelected = function (row){
             rowWasSelected = true;
         }

         //called via ng-blur of the input element
         ctrl.ngModelCtrl.$validators.invalidInput = function (modelValue, viewValue) {
               return rowWasSelected;
           }


         ctrl.$onInit = $onInit; //angular will execute this after 
             //all conrollers have been initialized, only safe to use
             //bound values (through bindToController) in 
             //the $onInit function.

             //i understand this need to be there with Angular 1.5 
             //using ngModel in the controller
             //but I really only need to validate on ng-blur of the input
        function $onInit() {
              ctrl.validateInput();
            }
           }
         };
      }  

view.html - 指令模板

   <div class="dropdown" ng-class="{'open' : ctrl.isOpen}">
      <div class="form-group">
        <input type="text" class="form-control" name="inputField"
               placeholder="select" ng-click="ctrl.openDropdown()"
               ng-blur="ctrl.validateInput()" 
               ng-model="ctrl.currentRow.name"
               ng-required="ctrl.ngRequired">
       </div>
   <ul class="dropdown-menu list-group">
      <li class="list-group-item" ng-repeat="row in ctrl.rows"
          ng-click="ctrl.onSelectedLocal(row)">
             {{row.name}}
      </li>
   </ul>
  </div>  

无论我有 $validators 函数，我都必须得到无效的类，因为它正在添加 ng-invalid 类，不管它是否存在？？

Answer 1

$setValidity(validationErrorKey, isValid);

Change the validity state, and notify the form.

This method can be called within $parsers/$formatters or a custom validation implementation. However, in most cases it should be sufficient to use the ngModel.$validators and ngModel.$asyncValidators collections which will call $setValidity automatically.¹