AngularJS + Bootstrap-驗證文本框-僅在用戶輸入一些數據后如何顯示驗證反饋？

Question

我正在對文本框進行一些驗證。 用戶輸入有效的輸入后，文本框應變為綠色，並且刻度線應出現在最右角。 同樣，如果用戶輸入了無效的數據，則文本框應變為紅色，而應顯示一個叉號。

為此，我使用了引導程序的“ has-error has-feedback'和'has-success has-feedback' css類。

我的問題是，即使首次加載頁面時，文本框也為綠色且有一個勾號。 我需要僅在用戶輸入輸入后才顯示驗證反饋。 當表單用於編輯現有記錄時，也是如此。 我該如何實現？ （我不確定是否可以使用$dirty和'$ pristine`解決此問題）

以下是我的標記。

<div class="form-group" ng-class="(Form.emailAddress.$valid) ? 'has-success has-feedback': 'has-error has-feedback'">
    <label for="emailAddress">Email address</label>
    <span ng-show="!Form.emailAddress.$valid">Please enter a valid address</span>

    <input type="email" class="form-control" id="emailAddress" name="emailAddress" ng-model="Data.emailAddress" ng-pattern="validationPattern" ng-maxlength="20">

    <span ng-show="Form.emailAddress.$valid" class="glyphicon glyphicon-ok form-control-feedback"></span>
    <span ng-show="!Form.emailAddress.$valid" class="glyphicon glyphicon-remove  form-control-feedback"></span>
</div>

有關此主題的其他幾個問題。

我也想檢查電子郵件的最大長度，如果超過20，我想顯示一個不同的消息。 我嘗試了Form.emailAddress。$ maxlength，但無法正常工作。 maxlength是否也適用於“電子郵件”類型？

用戶移至下一個文本框后，而不是在鍵入時顯示它，如何顯示反饋？ 可能類似於jquery的'focusout（）'。

我在控制器中使用了驗證模式，因為電子郵件不是必填字段，但是在輸入時必須有效。 請問是否有比這更好的方法？

任何幫助將非常感激。 謝謝

Answer 1

您必須將$ valid && $ dirty用於綠色，並在單獨的檢查中將$ invalid和$ dirty用於紅色。

這是一個示例： http : //plnkr.co/edit/k8X5NSeUrBb2nqA9yD9F

<form name="myform">
  Valid: {{myform.myinput.$valid}}<br/>
  Dirty: {{myform.myinput.$dirty}}<br/>
  <input type="text" 
         name="myinput" 
         required 
         ng-model="myvalue" 
         ng-class="{'has-success has-feedback': \
                     myform.myinput.$valid && myform.myinput.$dirty, \
                    'has-error has-feedback': \
                     myform.myinput.$invalid && myform.myinput.$dirty}"></input>
</form>