Question

我正在使用角度形式并且正在尝试创建一个验证，该验证将检查来自用户的值是否在两个将被动态设置的数字之间，因此它不需要始终相同。我很容易做到这一点的方法是使用一些变量并且验证有效，但是当错误累积时，消息会跳过变量。

这是我的验证方法代码：

//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属性。对于角度处理消息的方式有点令人困惑，但基本上message的值必须是一个表达方式，就像你在角度模板中看到它一样。因为您的消息属性评估为：

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

那是什么角度。因此，angular能够正确评估$viewValue，因为该字段$scope中有rangeMin，但rangeMax和$scope不在字段中＃39} ; s rangeMin，因此评估为空字符串。

因此，解决方案是直接引用rangeMax和$viewValue + " not in range of 0 and 100"，这样您传递给angular的内容就不必评估它们。

message

要执行此操作，您的message: '$viewValue + " not in range of ' + rangeMin + ' and ' + rangeMax + '"'属性应为：

rangeMin

以下是一个工作示例：https://jsbin.com/fupata/edit

注意，您也可以在字段选项中提供rangeMax和data {{1}}属性，如下所示：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。

＆＃13;

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

＆＃13;

.errors {
  color: maroon
}

＆＃13;

<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>

＆＃13;

直播示例jsfiddle。

具有动态值的角度形式验证消息

2 个答案: