角形式。如何获得一些输入来重新评估其他输入？答案

【问题标题】：Angular Forms. How to Get Some Inputs to Reevaluate Others?角形式。如何获得一些输入来重新评估其他输入？
【发布时间】：2016-04-26 14:51:04
【问题描述】：

我有一个角度形式的表格，它是一个类别文本输入和一个 ID 输入。 ID 对于类别必须是唯一的。所以如果我有Cat1的以下项目：

Cat1 - 123
Cat1 - 245
Cat1 - 456

然后，如果我尝试输入类别为 Cat1 和 ID 为 123 的新项目，那么该输入将不是该类别唯一的，并且无法提交表单。如果 id 更改为 1234 则有效。

为了实现这一点，我有一个名为 unique 的自定义指令，它需要 ngModel。看起来像这样-

HTML-

<input name="ID"
       required
       unique="id in getItemsByCategory(newCategory)"
       type="text"
       ng-model="newId"></input>

JS-

.directive('unique', function() {
    return {
      require: '^ngModel',
      link: function(scope, ele, attr, ngModelController) {
        ngModelController.$validators.unique = function(val) {
          var uniqueInRegex = /([^\s]+)\s+in\s([^\s]+)/i;

          var matches = attr.unique.match(uniqueInRegex);
          var property = matches[1];
          var collection = scope.$eval(matches[2]);

          for(var i = 0; i < collection.length; i++) {
            var item = collection[i];
            if(item[property] === val) {
              console.log('not unique');
              return false;
            }
          }

          console.log('unique');
          return true;
        };
      }
    };
  });

效果很好：

但是如果验证器根据类别发现该字段不是唯一的，并且类别字段发生了变化，那么验证器不会重新评估。

这里是这些 gif 中所见内容的 JSBin：

http://jsbin.com/wubesutugo/edit?html,js,output

当一个输入改变时，我是否可以让一个输入“触摸”另一个输入？我希望这个验证指令是通用的，因为我想在多个地方使用它。所以我不希望控制器中有这个逻辑。

【问题讨论】：

我找到了一个解决方案，但如果有更好的解决方案，我将把这个问题留待更长时间。在 Category 输入中，我有一个看起来像这样的 ng-change-<input name="Cat" ng-change="NewItemForm.ID.$validate()" required type="text" ng-model="newCategory"></input>

标签： javascript angularjs forms angular-ngmodel

【解决方案1】：

您使用ng-change 的解决方案就足够了。另一种方法是使用手表（准确地说是$watchCollection）：

.directive('unique', function() {
    var uniqueInRegex = /([^\s]+)\s+in\s([^\s]+)/i;
    return {
      require: '^ngModel',
      link: function(scope, ele, attr, ngModelController) {
        var matches = attr.unique.match(uniqueInRegex);
        var property = matches[1];
        var collectionExpr = matches[2];

        scope.$watchCollection(collectionExpr, function(newval) {
          ngModelController.$validate();
        });

        ngModelController.$validators.unique = function(val) {
          var collection = scope.$eval(collectionExpr);
          for(var i = 0; i < collection.length; i++) {
            var item = collection[i];
            if(item[property] === val) {
              console.log('not unique');
              return false;
            }
          }

          console.log('unique');
          return true;
        };
      }
    };
})

（也演示了只计算一次正则表达式。）

试试看：http://jsbin.com/wiyugozuje/1/edit?js,console,output

【讨论】：