當輸入字段中出現錯誤時，ng-class不會添加has-error

我試圖執行簡單的表單驗證。我在我的字段和ng-messages上使用必需和ng-minlength條件來顯示錯誤消息。僅當用戶訪問輸入字段時纔會顯示錯誤消息。但是我看不到任何錯誤消息。當我使用Chrome開發人員工具進行檢查時，發現輸入字段上的類正在改變，但'has-error'類未被添加到正在檢查此情況的其他div元素中。當輸入字段中出現錯誤時，ng-class不會添加has-error

這是應用程序加載的時候。

這是當我點擊用戶名字段並離開字段而沒有提供任何數據。請觀察紅色框中標記的元素的類別。我沒有收到任何錯誤顯示。這個問題可能是什麼？

1這是我使用

<form role="form" name="userForm" novalidate class="container-fluid"> 
 
       <div class="margin-bottom" ng-class="{'has-error' : userExists.notAvailable , 'has-error': userForm.username.$touched && userForm.username.$invalid}"> 
 
       <label for="email">username</label> 
 
       <input class="form-control" type="text" placeholder="UserName" name="username" ng-blur="checkingUser($event)" ng-model="username" required ng-minlength="4"> 
 
       <div ng-messages='userExists'> 
 
        <div ng-message='error'>Error!</div> 
 
        <div class="form-group" ng-message='notAvailable' class="has-error">Username already exists. Please choose a different username!!</div> 
 
       </div> 
 

 
       <div class="help-block" ng-messages="userForm.username.$error" ng-show="userForm.username.$touched" ng-class="{'has-error': userForm.username.$touched && userForm.username.$invalid}"> 
 
        <div class="form-group" ng-message='required' class="has-error">Username cannot be empty</div> 
 
        <div class="form-group" ng-message='minlength'>minimum 4 charcters</div> 
 
       </div> 
 
       </div>

來源

2016-11-01 angel

你可以在文本中發佈你的代碼以方便閱讀嗎？ – Soyokaze

很抱歉打擾你，但如果你仍然有問題，也請張貼你的AngularJS代碼。 – Soyokaze

非常感謝您試圖幫助我Soyokaze ..但不幸的是，我不能分享該代碼..只是我想盡我所能解釋使用廣義代碼版本的問題。 – angel

的源代碼發佈後編輯的NG的消息代碼片段：

<div class="margin-bottom" ng-class="{'has-error' : userExists.notAvailable , 'has-error': userForm.username.$touched && userForm.username.$invalid}"> 
    <label for="email">username</label> 
    <input class="form-control" type="text" placeholder="UserName" name="username" ng-blur="checkingUser($event)" ng-model="username" ng-required="true" ng-minlength="4"> 

    <div ng-messages='userExists'> 
     <div ng-message='error'>Error!</div> 
     <div class="form-group has-error" ng-message='notAvailable' >Username already exists. Please choose a different username!!</div> 
    </div> 

    <div ng-messages="userForm.username.$touched && userForm.username.$error" ng-class="{'has-error': userForm.username.$touched && userForm.username.$invalid}"> 
     <div class="form-group has-error" ng-message='required'>Username cannot be empty</div> 
     <div class="form-group" ng-message='minlength'>minimum 4 charcters</div> 
    </div> 
</div>

這工作對我機。您提交的形式後

的信息將顯示。

確保您已經在模塊中添加了所需的依賴項以使用ngMessage。如有必要，請發佈AngularJS代碼。

來源

2016-11-01 01:11:14 Soyokaze

當輸入字段中出現錯誤時，ng-class不會添加has-error

回答

相關問題