Question

我进入页面，我可以立即看到验证消息。

   <div ng-class="{'has-error': test.$invalid}" class="form-group" >
         <input id="field" name="field" required class="form-control" ng-model="field" type="text"/>
         <div class="help-block error" ng-show="test.field.$error.required">Required</div>
      </div>

link

如何避免这种情况？

Answer 1

你的问题主要是关于条件的事实 ng-show仅为test.field.$error.required。

这有什么问题？

即使页面加载，该字段仍然不是有效的电子邮件ID。

那么，解决方法是什么？

您需要检查用户是否实际点击了该字段，该字段不再是pristine。

我们该怎么做？

在ng-show中，添加以下条件。

test.field.$error.required && test.field.$dirty

这是一个有效的 DEMO

Answer 2

您还需要添加一项检查以查看是否也触摸了输入。

<div ng-class="{'has-error': test.$invalid}" class="form-group" >
     <input id="field" name="field" required class="form-control" ng-model="field" type="text"/>
     <div class="help-block error" ng-show="test.field.$error.required && test.field.$touched">Required</div>
  </div>

默认情况下显示验证消息

2 个答案: