javascript - Angular ngMessages - 访问多个表单值

Question

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

具体来说，我希望一些输入的值(输入的数量是动态的，但现在坚持使用 2)总计 100。

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

我已经在下面发布了我的代码。我有什么遗漏的吗？另外，如果有更好的方法来完成此任务(例如 Controller 中的 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 。父 Controller 的 sum() 方法计算总数(在 fiddle 中很简单，但由于父 Controller 知道整个动态模型，因此在实际情况下也是可行的)。 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() 函数(可能会很昂贵)被调用了很多次。观察此函数的输入并仅在它们发生变化时调用它，可能会改善这种情况。

更新的 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>

正如您所看到的，总体验证适用于整个模型。

如果您可以接受整个“总体”验证仅使用一条消息，则第二个示例可以正常工作。但我不喜欢...

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