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

Question

我正在使用 angular-formly 并尝试创建一个验证来检查用户的值是否介于两个将动态设置的数字之间，因此它不需要相同每时每刻。我认为最简单的方法是使用几个变量并且验证有效，但是当错误出现时消息会跳过变量。

这是我的验证方法代码：

//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 处理消息的方式有点令人困惑，但基本上 message 的值需要像您在 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

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

Answer 2

在这种情况下，您可以使用有助于创建您自己的检查的指令 use-form-error，例如 ng-required、ng-minlength 或 ng-pattern。

angular.module('ExampleApp', ['use', 'ngMessages'])
  .controller('ExampleController', function($scope) {
  $scope.min=1;
    $scope.max=100;
  });

.errors {
  color: maroon
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script>
<script src="https://cdn.rawgit.com/Stepan-Kasyanenko/use-form-error/master/src/use-form-error.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">

    <form name="ExampleForm">
      <label>Range from</label>
      <input ng-model="min" required /><label>to</label>
      <input ng-model="max" required />
      <br>
      <label>Number in range</label>
      <input ng-model="num" required use-form-error="notInRange" use-error-expression="!(num*1>min*1 && num*1<max*1)" />
      <div ng-messages="ExampleForm.$error" class="errors">
        <div ng-message="notInRange">
          Number not in range of {{min}} and {{max}}
        </div>
      </div>
    </form>

  </div>
</div>

实例jsfiddle.

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

angular-formly validation message with dynamic values

html

javascript

validation

angularjs

angular-formly