0

我正在尝试向 Angular 的 ngMessages 添加自定义验证功能。

具体来说，我希望几个输入的值（输入的数量是动态的，但现在坚持使用 2）总计 100。

我创建了一个名为的新指令totalOneHundred，它触发表单更改，但我无法弄清楚如何从link:回调中访问其他表单值。

我在下面发布了我的代码。有什么我想念的吗？此外，如果有更好的方法来实现这一点（例如sum()，控制器中的一个函数和一个ng-show），请给我打电话。

谢谢你的帮助。

表格： 

<!-- input box to be validated -->
<input type="number" class="form-control" name="lowBound" ng-model="ctrl.lowBound" total-one-hundred required>

<!-- validation messages -->
<div ng-messages="form['lowBound'].$error" role="alert">
    <div ng-message="required">Cannot be empty</div>
    <div ng-message="totalOneHundred">Sum of tasks must = 100</div>
</div>

<!-- input box to be validated -->
<input type="number" class="form-control" name="highBound" ng-model="ctrl.highBound" total-one-hundred required>

<!-- validation messages -->
<div ng-messages="form['highBound'].$error" role="alert">
    <div ng-message="required">Cannot be empty</div>
    <div ng-message="totalOneHundred">Sum of tasks must = 100</div>
</div>

指令：

return {
    restrict: "A",

    require: ["^^form", "ngModel"],

    link: function(scope, element, attributes, controllers) {

        // At first, form is assigned the actual form controller...
        const form = controllers[0];
        const model = controllers[1];

        model.$validators.totalOneHundred = function (modelValue, form, element, scope) {

          // however, the value of form here is "1".
          // modelValue is the value of the triggering input, 
          // but how can I access the other form inputs?
          return true;

        };

    }
};
4

1 回答 1

1

最初我拿了你的代码并实现了这个小提琴。父控制器的sum()方法计算总数（在小提琴中很简单，但由于父控制器知道整个动态模型，因此在实际情况下也是可行的）。将total-one-hundred总和作为参数，即：

<input type="number" class="form-control" name="lowBound" ng-model="ctrl.lowBound"
    total-one-hundred="ctrl.sum()" required />

唉，它不能正常工作！问题：每个输入显示“任务总和必须 = 100”错误。如果您更改了一个字段并且总数变为正确，则该字段将变为有效并停止显示该消息。但其他领域没有！

编辑：嗯，它甚至可以这样工作。秘诀是在每个验证指令的总和上添加一个监视，并在该字段上重新应用验证；新的链接功能：

  link: function(scope, element, attributes, controllers) {
      const model = controllers[0];
      var totalEvaluator = $parse(attributes['totalOneHundred']);

      scope.$watch(totalEvaluator, function(newval, oldval) {
        if( newval !== oldval ) {
            model.$validate();
        }
      })

      model.$validators.totalOneHundred = function (modelValue) {
        return totalEvaluator(scope) === 100;
      };
  }

（请注意，每个字段需要额外的手表！）

然而，现在该sum()函数（可能很昂贵）被多次调用。观察该函数的输入并仅在它们发生变化时调用它，可能会改善这种情况。

更新的小提琴：https ://jsfiddle.net/m8ae0jea/1/ （我仍然更喜欢模型验证 - 请参阅最后一段 - 但最好了解所有替代方案及其副作用。）

这是跨领域验证的概念问题。验证属于哪里？如果您可以重构您的模型以便验证的是整个对象，那么您可以使用 Angular 的自定义控件，就像在这个 fiddle中一样。

现在模型看起来像：

this.model = {
    lowBound: <a number>,
    highBound: <a number>
};

整个模型都有一个编辑器，并带有自己的消息：

<model-editor name="entireModel" ng-model="ctrl.model" form="form"
    total-one-hundred="ctrl.sum()"></model-editor>
<div ng-messages="form['entireModel'].$error" role="alert">
  <div ng-message="totalOneHundred">Sum of tasks must = 100</div>
</div>

如您所见，总验证适用于整个模型。

如果您可以只使用一条消息来完成整个“总”验证，则第二个示例可以正常工作。但我不喜欢它...

Angular 的验证是（恕我直言）一种适用于简单事情的快速而肮脏的解决方案。假设一个字段不能为空，另一个字段必须符合正则表达式等等。对于复杂的事情（比如这种情况），我发现在视图中定义业务逻辑是不合适的。我更喜欢进行模型验证并将验证结果与 Angular 绑定。在那个程度上，我创建了非常适合此类事情的egkyron 。

于 2016-08-05T15:07:08.327 回答