2

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

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

有道理？有任何想法吗？

谢谢！马特

4

3 回答 3

1

也许这有效：

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

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

在这里，您可以看到此指令的更多选项：https://docs.angularjs.org/guide/forms中的自定义模型更新触发器。并且在ngModelOptions中有更详细的解释。

让我知道它是否有效:)

于 2016-03-18T12:52:54.707 回答
0

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

ng-blur="validate()"

在您的控制器中 -

$scope.validate = function(){
   //Validate logic
     //If invalid
        //Show message logic here  
}
于 2016-03-18T12:55:11.083 回答
0

查看 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>

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

于 2016-03-18T13:44:23.813 回答