Unable to clean form

Question

I am trying to create a reset form after clicking the submit button. I understand that setting the form to untouched should not clear the input fields. I tried to implement various suggestions to clear the form by setting the form to untouched, and then assigning null to all input fields. Is there a more accurate way to implement it?

Template:

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

and i also tried

 $scope.contactForm.$pristine=true;

None of them seem to work. I am using angular 1.4.8.

Thanks.

Answer 1

I finally started working by making the following changes:

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

and 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(), reset ng-model. , <form>.

JSFiddle ( , )

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

controlForm, html contactForm

Answer 3

Do the following:

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

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