AngularJS zeigt Fehler beim Senden

Question

Ich benutze AngularJS Schritt Wizard und in das Formular für den ersten Schritt Ich brauche Validierungsfehler zu erscheinen, wenn die Verwendung versucht, zu treffen, senden. Im Moment habe ich die folgenden:

<span class="error" ng-show="user.validate.step1.firstname.$invalid">Required Field</span> 

Aber der Fehler zeigt an, wenn ich zum ersten Mal den Schritt lese und wenn ich die Eingabe beginnen in dem Feld, um es weg geht, würde ich dies erscheinen mag, wenn der Benutzer einreichen zu schlagen versucht, nicht wenn sie zum ersten Schritt kamen. Ich habe dies bereits ein Pflichtfeld

<span class="error">*</span> 

Hier, um anzuzeigen, ist der vollständige Code:

<form name="user.validate.step1" novalidate> 
       <div class="container"> 
        <div class="row"> 
         <div class="col-md-6"> 
          <div class="form-group"> 
           <label for="firstname" class="col-md-4 form-label">First Name:</label> 
           <div class="col-md-8"> 
            <div class="input-group"> 
             <input class="form-control" type="text" name="firstname" ng-model="user.firstname" value="{{user.firstname}}" ng-blur="blur1=true" required /> 
             <span class="error" ng-show="user.validate.step1.firstname.$invalid">*</span> 
            </div> 
           </div> 
          </div> 
</div> 
</div> 
</div> 
</form> 

im Auge behalten, ich habe mehr als einen Eingang in dieser Form.

Answer 1

Fügen Sie die Validierung in der Schaltfläche mit ng-click="validateInputs()" hinzu und erstellen Sie eine Variable invalidEntry und eine Funktion validateInputs(), um zu überprüfen, ob die Eingabe gültig ist oder nicht. Etwas wie folgt aus:

var inputs = [inputModel1,inputModel2,inputModel3]; 

function validateInputs(){ 
    invalidEntry = false; 
    for(e in inputs){ 
     if(CheckInvalid(inputs[e])){ 
      invalidEntry = true; 
      return; 
     } 
    } 

} 

function CheckValid(string){ 
    if(string == "" || string === null || string === undefined){ 
     return true; 
    } else { 
     return false; 
    } 
} 

Die Submit-Button:

<button ng-click="validateInputs()">Submit</button> 

Und die Spannweite:

<input type="text" ng-model="inputModel1"></input> 
<input type="text" ng-model="inputModel2"></input> 
<input type="text" ng-model="inputModel3"></input> 

Answer 2

Sie sollten:

<span class="error" ng-show="invalidEntry">Required Field</span> 

Und die Eingänge sollte wie folgt aussehen Ändern Sie ngShow folgendermaßen:

ng-show="user.validate.step1.firstname.$invalid && !user.validate.step1.firstname.$pristine" 

prüfen Sie diesen Artikel Block AngularJS Form Validation: Only Showing Errors After Submitting the Form