角度定制验证

Question

我是角色的新手，我无法找到角度应用的自定义验证的完美解决方案。

我们有一个附加到数组的输入字段（列表有2500多个选项）现在我们要验证对于我们无法执行的数组键入的值用户，这是我们的简单代码

    var value_array = ["a",c","c"];
    app.directive('validValue', function() {
        return {
            restrict: 'A',
            require: '^form',
            link: function(scope,elem,attr,formController) {
                elem.bind('blur', function() {
                 // no idea what to do from here
        }
    });

Answer 1

您可以使用datalist元素进行验证，或使用setCustomValidity使元素无效。

在模板中使用datalist（可能不需要指令）：

<input ng-model="model" list="validOptions">
<datalist id="validOptions">
  <option value="red" />
  <option value="green" />
  <option value="blue" />
</datalist>

使用setCustomValidity：

将元素标记为有效，将空字符串''传递给函数，否则传递错误消息。

elem.bind('blur', function() {
  for(let validOption of options) {
    if(validOption === value) {
      return elem[0].setCustomValidity('');
    }
  }
  elem[0].setCustomValidity('Invalid value, try again');
});