Angular - 在用户编辑字段后触发 onBlur 消息

Question

和其他人一样，我一直在寻找一种好方法来使用 Angular 验证我的表单，同时又不会让消息过于激进。我得到的最接近的是在触发消息之前检查 $dirty 和 $touched。适用于大多数情况。

我无法弄清楚的一种情况是当用户编辑时，例如，必填字段。该字段中有文本、有效、脏和已触及。用户返回现场进行更改。他们退格输入中的内容，并立即触发消息，因为输入现在变脏、已触及且无效。我宁愿在那个时候 "reset" 并在用户再次模糊输入时重新评估。让他们有机会在输入仍然集中的时候填写输入内容。

有道理吗？有什么想法吗？

谢谢！马特

Answer 1

也许这行得通：

ng-model-options="{ updateOn: 'blur' }"

将其添加到您的 input 元素中。我相信验证会在模型更新时进行，这样模型就会在模糊时得到更新。

在这里您可以看到该指令的更多选项：https://docs.angularjs.org/guide/forms in Custom model update triggers. And a more detailed explanations in ngModelOptions。

让我知道它是否有效:)

Answer 2

使用 ng-blur 上的函数来验证并在无效时显示消息。

ng-blur="validate()"

在你的控制器中 -

$scope.validate = function(){
   //Validate logic
     //If invalid
        //Show message logic here  
}

Answer 3

查看 ngMessages 文档： https://docs.angularjs.org/api/ngMessages/directive/ngMessages

你有一个例子告诉你如何使用它：

<form name="myForm">
  <label>
    Enter your name:
    <input type="text"
           name="myName"
           ng-model="name"
           ng-minlength="5"
           ng-maxlength="20"
           required />
  </label>
  <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>

  <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
  </div>
</form>

我认为这是最好的方法（至少我是这样做的）。

Angular - 在用户编辑字段后触发 onBlur 消息

Angular - Firing message onBlur after user edits field

angularjs

forms

validation

ng-messages