Question

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

我无法弄清楚的一种情况是用户编辑时，例如，必填字段。该字段中包含文本，有效，脏和触摸。用户返回该字段进行更改。它们退回输入中的内容并立即触发消息，因为输入现在变脏，触摸和无效。我宁愿在那时“重置”并在用户再次模糊输入时重新评估。给他们一个机会，在他们仍然专注的时候填写输入。

有意义吗？有什么想法吗？

谢谢！马特

Answer 1

也许这有效：

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

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

您可以在此处看到此指令的更多选项：自定义模型更新触发器中的https://docs.angularjs.org/guide/forms。以及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上的消息

3 个答案: