Question

我正在尝试向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;

        };

    }
};

Answer 1

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

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

唉，它无法正常工作！问题：每个输入显示＆＃34;任务总和必须= 100＆＃34;错误。如果更改字段并且总计变为正确，则该字段将变为有效并停止显示该消息。但其他领域没有！

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

  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/（我仍然更喜欢模型验证 - 请参阅最后一段 - 但要了解所有替代品及其副作用是很好的。）

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

现在模型看起来像：

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>

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

第二个示例正常工作，如果您只能使用一条消息来处理整个＆＃34;总计＆＃34;验证。但我不喜欢它......

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

Angular ngMessages - 访问多个表单值

1 个答案: