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

我正在對文本框進行一些驗證。一旦用戶輸入了有效的輸入，文本框應該變爲綠色，並在最右角顯示刻度線。同樣，如果用戶輸入的數據無效，文本框應該變爲紅色，而應該出現十字。AngularJS + Bootstrap - 驗證文本框 - 如何僅在用戶輸入一些數據後才顯示驗證反饋？

爲此，我使用引導程序的'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，但無法讓它工作。它最大長度是否也適用於「電子郵件」類型？

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

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

任何幫助將不勝感激。謝謝

來源

2014-03-04 Ren

你嘗試（Form.emailAddress $ &&有效$ Form.emailAddress髒。）等等領域是唯一的綠色，如果它是骯髒和有效？ –

是的。我嘗試了ng-class =「（contactDetailsForm.emailAddress。$ valid）&& contactDetailsForm.emailAddress。$ dirty？'has-success has-feedback'：'has-error has-feedback'」但是當文本框默認爲紅色時該頁面已加載。 – Ren

你需要兩個單獨的檢查。 $ valid && $ dirty檢查是否有綠色，另一個是$無效&& $髒檢查紅色。 –

您必須使用$ valid & & $ dirty for green並在單獨的檢查中，使用$ 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>

來源

2014-03-05 13:01:53

謝謝。你的答案看起來很有希望。我會放棄它。 $ invalid和$ error.maxlength是否也適用於input type =「email」？ – Ren

如果您查看Angular代碼，則電子郵件輸入類型會擴展文本輸入類型。所以，對文本輸入起作用的所有東西都應該在電子郵件輸入上起作用。 –

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

回答

相關問題