javascript - Angular 自定义验证

Question

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

我们有一个附加到数组的输入字段(列表有 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 使该元素无效。

在模板中使用数据列表(可能不需要指令):

<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');
});