javascript - 具有动态值的 Angular 形式验证消息

Question

我正在使用 Angular 形式，并尝试创建一个验证，以检查用户的值是否在动态设置的两个数字之间，因此它不需要始终相同。我认为最简单的方法是使用一些变量，并且验证有效，但当错误发生时，消息会跳过变量。

JS Bin of my problem here

这是我的验证方法代码:

//Default values can be changed durign runtime
var rangeMin = 0;
var rangeMax = 100;
var value;

vm.fields = [
  {
    key: 'number',
    type: 'input',
    validators: {
      ipAddress: {
        expression: function(viewValue, modelValue) {
          value = modelValue || viewValue;
          var returning = false;
          if(value > rangeMin &&  value < rangeMax)
          {
            returning = true;
          }
          return returning;
        },
        message: '$viewValue + " not in range of " + rangeMin + " and " + rangeMax'
      }
    },
    templateOptions: {
      label: 'Number',
      type: 'text',
    }
  }];

Answer 1

您遇到的问题出在 message 属性中。这与 Angular 处理消息的方式有点令人困惑，但基本上消息的值需要是一个表达式，就像您在 Angular 模板中看到的那样。因为您的消息属性评估为:

$viewValue + " not in range of " + rangeMin + " and " + rangeMax

这就是 Angular 所给出的。因此， Angular 能够正确评估 $viewValue 因为它位于字段的 $scope 中，但是 rangeMin 和 rangeMax 是不在字段的 $scope 中，因此这些值被计算为空字符串。

因此，解决方案是直接引用 rangeMin 和 rangeMax，这样您传递给 Angular 的内容就不必评估它们。

$viewValue + " not in range of 0 and 100"

为此，您的 message 属性应该是:

message: '$viewValue + " not in range of ' + rangeMin + ' and ' + rangeMax + '"'

这是一个工作示例:https://jsbin.com/fupata/edit

<小时/>

请注意，您也可以在字段选项中提供 rangeMin 和 rangeMax 作为 data 属性，如下所示:https://jsbin.com/baxise/edit?html,js,console,output

这使得您可以创建一个自定义类型来保存所有这些验证逻辑，从而使事情变得更加可重用，如下所示:https://jsbin.com/teleko/edit?html,js,output

最后一个就是我要做的:-)祝你好运😀👍