Angular Form 上的自定义验证 - 关于模糊答案

【问题标题】：Custom validation on Angular Form - on blurAngular Form 上的自定义验证 - 关于模糊
【发布时间】：2016-05-31 20:25:09
【问题描述】：

在 Angular 中，我试图验证模糊字段的值。我有一个客户列表，我想检查字段中的模型值是否在我的客户列表中。如果没有，我想将有效性设置为 false。

我知道ng-model-options="{updateOn: 'blur'} 存在，但是我不能使用它，因为该字段是预先输入的，所以它必须根据模型进行更新。验证是模糊时需要发生的事情。

答案似乎是：

将它作为一个函数写在控制器中，并像在指令中一样使用 $setValidity。使用 ng-blur 触发输入字段中的功能。

-但是，我不断遇到一些示例，其中自定义验证（如果模型值与列表中的值不匹配，则使字段无效）仅作为指令编写。是否有编写为函数的自定义验证示例？
编写一个仅在模糊时触发的指令。

但是，我找不到执行上述任一操作的示例。是否有人将自定义验证作为函数或仅在字段模糊时更新的指令的示例？

我发现这个链接对自定义验证很有帮助，但我仍然对函数和指令之间的区别有同样的问题：How to add custom validation to an AngularJS form?

【问题讨论】：

标签： javascript angularjs validation angularjs-directive angular-ngmodel

【解决方案1】：

作为我们最近一直在做的事情：

<form name='vm.formName' id='vm.formName' novalidate>
  <input type='text' id='textField' name='textField' ng-blur='vm.blurMethod()' ng-model='vm.model.text' />
  // The submit is only here for show;
  <input type='submit' id='submit' ng-click='vm.submitForm()' />
</form>

在控制器中：

blurMethod() {
  if (this.formName.textField.$viewValue !== myArbitraryValue) {
    // $setValidity called on the form, setting the textfield's validity to false
    // then you can have your own validators show the error in the template
    this.formName.$setValidity('textField', false);
  }
}

这不是我的想法，早上会看看它是否反映了我们一直在使用的东西。现在更新了 $setValidity 调用。

这假设您使用的是 controllerAs: 'vm' 语法，这就是表单名称为 'vm.formname' 而控制器使用的是 'this' 的原因。

【讨论】：

这看起来很有希望，期待明天的更新
嘿 rrd，如果它与您一直在使用的东西相匹配，有什么运气吗？
是的，我更新了帖子，这是我们正在使用的。在表单上调用 $setValidity() 并将输入字段作为参数。
接受了你的回答，不得不调整我的解决方案，但你把我带到了正确的地方。唯一令人讨厌的是，显然在预输入上进行选择算作“模糊”操作，因此它会通过该函数两次。

【解决方案2】：

我已使用 ui-bootstrap 进行预输入，并充分控制您的验证ui-bootstrap typeahead

EDIT-代码示例

<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control" typeahead-no-results="$scope.matchFail"> <div ng-show="$scope.matchFail">Not on list!!</div>

当你选择一个不在列表中的值时，会显示 div

【讨论】：

预输入工作正常。你在说什么样的验证？如果没有结果，我希望我的表单中有一个错误：“typeahead-no-results $（默认值：angular.noop）-绑定到一个变量，指示是否找不到匹配的结果。”现在它显示没有结果，但它不会在我的表单中引发错误。
这对我没有帮助。我没有结果工作，它显示了div。那部分很简单。无效的是验证，例如，此链接中显示的内容：stackoverflow.com/questions/12581439/…。在这种情况下，如果 typeahead-no-results 出现，则应该无法提交表单。如果有帮助，下面的答案更接近于回答我正在寻找的内容。