Angular ngMessages - 访问多个表单值

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() 方法计算总数（在 fiddle 中很简单，但由于父控制器知道整个动态模型，因此在实际情况下也是可行的）。 total-one-hundred 以和为参数，即：

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

唉，它不能正常工作！问题：每个输入都显示 "Sum of tasks must = 100" 错误。如果您更改字段并且总计变得正确，则该字段将变为有效并停止显示消息。但是其他字段没有！

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

  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() 函数（可能会很昂贵）被调用了很多次。观察此函数的输入并仅在它们发生变化时调用它，可能会改善这种情况。

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

这是跨域验证的概念性问题。验证属于哪里？如果您可以重构您的模型以便验证的是整个对象，那么您可以使用 Angular 的自定义控件，如 this 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>

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

如果您可以在整个 "total" 验证过程中只接受一条消息，那么第二个示例可以正常工作。但是我不喜欢...

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

Angular ngMessages - 访问多个表单值

Angular ngMessages - Accessing Multiple Form Values

javascript

angularjs

ng-messages