默認顯示驗證消息

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>