How reset form and validation after submitting form (AngularJS)

Question

I want to reset form and all validation messages after submitting a form. Here is plunker:http://plnkr.co/edit/992RP8gemIjgc3KxzLvQ?p=preview

My code is bellow:

Controller:

app.controller('MainCtrl', function($scope) {
  $scope.data={fullName:''};

  $scope.submit=function(){
    console.log('submit')
    $scope.myForm.$setPristine();
    $scope.myForm.$setUntouched();
    $scope.data={fullName:''};
  }
});

HTML:

<body ng-controller="MainCtrl">
<form name="myForm" novalidate>
<div>
    <label class="control-label">Name</label>
    <input
            name="full_name"
            type="text"
            ng-model="data.fullName"
            ng-required="true">

    <p ng-if="myForm.$submitted && myForm.$invalid">Validation message</p>
</div>
<button ng-click="submit()" type="submit">
    Submit
</button>
</form>
</body>

My problem is: when user enters name in the input and clicks on Submit button, validation message shouldn't be shown, because model, form and validation should be resetted. How I can do it?

I tried to use $setPristine() and $setUntouched(), but it doesn't work for me.

Is it possible to do in AngularJS? Thanks!

Duplicate of stackoverflow.com/questions/26015010/angularjs-form-reset-error — DexTer
– DexTer, Commented Oct 6, 2015 at 15:41

charlietfl · Accepted Answer · 2015-10-06 15:30:01Z

5

I'm surrpised but $setpristine() doesn't update $submitted.

This may not be the prettiest solution but seems to work:

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.data = {
    fullName: ''
  };
  $scope.submit = function() {
    console.log('submit')
     $scope.data = {
      fullName: ''
    };
    $timeout(function() {
      $scope.myForm.$setPristine();
      $scope.myForm.$setUntouched();
      $scope.myForm.$submitted = false;
    });   
  }
});

DEMO

answered Oct 6, 2015 at 15:30

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dipendu Paul Over a year ago

thanks...I've used it like this: <input id="btnModalAddNotes" ng-disabled="notesFrm.$invalid" ng-click="addNotes();notesFrm.$setPristine();notesFrm.$setUntouched();notesFrm.$submitted = false;" type="submit" class="btn btn-info" value="Submit"/>

ojus kulkarni Over a year ago

is it possible to get all the form input value using $scope.myForm ?

Collectives™ on Stack Overflow

How reset form and validation after submitting form (AngularJS)

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related