默认显示验证消息

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>