Ошибка формы при отправке

Question

У меня есть форма, в которой есть одно обязательное поле и одно необязательное поле. После успешного отправки формы, отправляющей данные на сервер, я очищаю данные как в моделях полей ввода. Однако при этом требуемое поле становится красным и показывает ошибку This field is required. Как я могу сохранить необходимую ошибку поля после отправки формы и очистки ее данных. Я хочу, чтобы он отображал ошибку только тогда, когда пользователь пытается отправить форму с ПОМОЩЬЮ ТРЕБУЕМОГО ПОЛЯ.

<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

Вы должны изменить ваш onSubmitClicked как этот

$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 
     } 
    }; 

и вызов этой функции, как этот

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

Answer 2

Добавление на ответ Asiel, вы должны сделать следующее после очистки модели ,

    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 установит форму его нетронутым состояние, следовательно, удаление сообщения об ошибке.

Answer 3

пожалуйста, сделайте следующее:

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

};