Formularfehler beim Senden

Question

Ich habe ein Formular, in dem es ein Pflichtfeld und ein nicht benötigtes Feld gibt. Nach erfolgreicher Übermittlung des Formulars, das Daten an den Server sendet, lösche ich die Daten in beiden Eingabefeldmodellen. Dadurch wird das erforderliche Feld jedoch ROT und zeigt den Fehler This field is required an. Wie kann ich den erforderlichen Feldfehler nach dem Absenden des Formulars und dem Löschen der Daten freihalten? Ich will, dass es nur Fehler anzeigt, wenn der Benutzer versucht, das Formular mit LEFT REQUIRED FIELD zu senden.

<form name="myForm"> 
    <div layout="row" layout-align="center center" flex="100"> 
     <md-input-container class="md-block" flex="40"> 
      <input required type="text" placeholder="Book Name" 
        ng-model="bookName" 
      /> 

      <div ng-messages="$error"> 
       <div ng-message="required">This is required.</div> 
      </div> 
     </md-input-container> 

     <span flex="10"></span> 

     <md-input-container class="md-block" flex="40"> 
      <input type="text" placeholder="Theme" 
        ng-model="theme" 
        enter-pressed=""/> 
     </md-input-container> 
    </div> 
</form> 

<md-button class="md-raised md-primary" flex="none" type="submit" 
      ng-click="onSubmitClicked()">Submit 
</md-button> 


    $scope.onSubmitClicked = function() { 
     $scope.bookName = ""; // this causes the REQUIRED FIELD ERROR AFTER I SUBMIT THE FORM 
     $scope.theme = ""; 
    }; 

Answer 1

Sie sollten diese Ihre onSubmitClicked wie

ändern

$scope.onSubmitClicked = function(form) { 
     $scope.bookName = ""; // this causes the REQUIRED FIELD ERROR AFTER I SUBMIT THE FORM 
     $scope.theme = ""; 

     if(form){ //make sure a form is passed as parameter 
     form.$setPristine(); //this will reset the form to its original state 
     } 
    }; 

und der Aufruf dieser Funktion wie diese

... 
<md-button class="md-raised md-primary" flex="none" type="submit" 
      ng-click="onSubmitClicked(myForm)">Submit 
</md-button> 
... 

Answer 2

auf Antwort des Asiel Hinzufügen, sollten Sie folgendes tun, nachdem die Modelle Clearing .

    if(form){ //make sure a form is passed as parameter 
        form.$setPristine(); //this will reset the form to its original state 
        form.$setUntouched(); 
       } 

form.$setUntouched wird das Formular an seinen unberührten Zustand gesetzt daher die Fehlermeldung zu entfernen.

Answer 3

bitte wie folgt vor:

<form name="myForm" ng-submit="onSubmitClicked(myForm)"> 

    <md-button class="md-raised md-primary" flex="none" type="submit">Submit</md-button> 
</form> 


$scope.onSubmitClicked = function(form) { 
    if (form.$valid) { 
      // do what you have to do, the form is validated 
     return; 
    } 

    // dont do anythign the form will flag ans $invalid and $submitted and the error messages will show 
    return; 

};