Не удается удалить форму

Question

Я пытаюсь сбросить форму после нажатия кнопки отправки. Я понимаю, что установка формы на нетронутую не должна очищать поля ввода. Я попытался реализовать различные предложения, чтобы очистить форму, установив форму в нетронутую, а затем присвоив значение null всем полям ввода. Есть ли более аккуратный способ его реализации?

Шаблон:

<p>{{contactForm.$pristine}}</p> 
    <div class="inBox"> 
     <form name="contactForm" novalidate> 

      <div class="form-group" ng-class="{ 'has-error' : contactForm.name.$invalid && !contactForm.name.$pristine }"> 
       <label>Name</label> 
       <input type="text" ng-model="tabVm.name" class="form-control" name="name" required> 
       <p ng-show="contactForm.name.$invalid && !contactForm.name.$pristine" class="help-block">You name is required.</p> 
      </div> 


      <div class="form-group" ng-class="{ 'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine }"> 
       <label>Email</label> 
       <input type="email" ng-model="tabVm.email" name="email" class="form-control" required> 
       <p ng-show="contactForm.email.$invalid && !contactForm.email.$pristine" class="help-block">Enter a valid email.</p> 
      </div> 

      <div class="form-group"> 
       <label>Contact Number</label> 
       <input type="tel" ng-model="tabVm.number" class="form-control"> 
      </div> 

      <div class="form-group" ng-class="{ 'has-error' : contactForm.message.$invalid && !contactForm.message.$pristine }"> 
       <label>Message</label> 
       <textarea type="text" rows="5" ng-model="tabVm.message" name="message" class="form-control textBox" required></textarea> 
       <p ng-show="contactForm.message.$invalid && !contactForm.message.$pristine" class="help-block">Brief message is required.</p> 
      </div> 


     </form> 
     <button type="submit" ng-click="sendMsg()" class="btn large-btn" 
       ng-disabled="contactForm.message.$invalid || contactForm.name.$invalid||contactForm.email.$invalid " >Send</button> 

    </div> 

app.js

$scope.contactForm.$setPristine(); 

и я также попытался

$scope.contactForm.$pristine=true; 

Ни один из них, кажется, работают. Я использую угловой 1.4.8.

спасибо.

Answer 1

Я, наконец, получил его работу, внеся следующие изменения:

<div class="container box col-lg-6" > 
    <p>{{contactForm.$pristine}}</p> 
    <p>name state: {{contactForm.name.$pristine}}</p> 
    <div class="inBox"> 
     <form name="contactForm" ng-submit="sendMsg(contactForm)" novalidate> 

      <div class="form-group" ng-class="{ 'has-error' : contactForm.name.$invalid && !contactForm.name.$pristine }"> 
       <label>Name</label> 
       <input type="text" ng-model="tabVm.name" class="form-control" name="name" required> 
       <p ng-show="contactForm.name.$invalid && !contactForm.name.$pristine" class="help-block">You name is required.</p> 
      </div> 


      <input type="submit" class="btn large-btn" 
        ng-disabled="contactForm.message.$invalid || contactForm.name.$invalid||contactForm.email.$invalid " > 
     </form> 
    </div> 
</div> 

и app.js:

$scope.sendMsg=function(form){ 
     if(form.$valid){ 
      console.log("Form is valid"); //this was a check I used to confirm that the controller recognized the form. 
     } 
      form.$setPristine(); 
      tabVm.name=""; 

     } 

    } 

Я не ясно понять, почему это работает, или что я делаю неправильно раньше. Я был бы признателен, если бы кто-нибудь мог объяснить. Спасибо.

Answer 2

Вы должны использовать $setPristine(), а затем сбросить объект ng-model. Также обратите внимание, что у вас есть кнопка отправки за пределами <form>.

Это рабочий JSFiddle (я использовал только один вход, например)

$scope.sendMsg = function() { 
     $scope.contactForm.$setPristine(); 
     $scope.tabVm = {}; 
    } 

Вы ссылаетесь controlForm, но HTML вы вывесили есть contactForm

Answer 3

Выполните следующие действия

$scope.sendMsg = function(){ 
//your function code 

$scope.tabVm={}; 
$scope.tabVm.name=''; 
$scope.tabVm.email=''; 
$scope.tabVm.number=''; 
$scope.tabVm.message=''; 
}