ng-Klasse nicht hinzugefügt hat-Fehler, wenn Fehler in Eingabefeld

Question

Ich versuche, einfache Formularvalidierung durchzuführen. Ich verwende die erforderlichen und ng-minlength-Bedingungen für meine Felder und ng-Nachrichten, um die Fehlermeldungen anzuzeigen. Die Fehlermeldungen sollten nur angezeigt werden, wenn Benutzer auf das Eingabefeld zugreifen. Ich sehe jedoch keine Fehlermeldungen. Als ich Chrome-Entwicklertools untersucht unter Verwendung fand ich die Klassen auf dem Eingabefeld ändern sich aber die Klasse ‚hat-Fehler‘ wird auf den anderen div Elemente hinzugefügt, die für diesen Zustand sind zu überprüfen.

das ist, wenn die Anwendung geladen wurde.

das ist, wenn ich den Benutzernamen Feld geklickt und das Feld verlassen, ohne Daten zu geben. Bitte beachten Sie die Klassen der rot markierten Elemente. Ich bekomme keine Fehler angezeigt. Was könnte das Problem sein?

1 ist dies der ng-Nachrichten-Code-Snippet, das i

<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>

Answer 1

, nachdem der Code Quelle Herausgegeben bin mit gebucht wird:

<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> 

Dies funktioniert auf meinem Maschine.

Die Nachricht wird nachdem Sie das Formular eingereicht haben angezeigt.

Stellen Sie sicher, dass Sie in Ihrem Modul die erforderliche Abhängigkeit hinzugefügt haben, um ngMessage zu verwenden. Falls erforderlich, poste bitte auch den AngularJS-Code.