How to reset a form in AngularJS post submit from HTML only?

Question

I have a form. Post submit, if the form is invalid, the error props out below the input fields.

One can hide the form using Cancel button.

The form can be displayed again using 'Show Form' button.

But the issue: The old form error still persists.

How can one reset the form without setting the ng-model associated with it as the input fields should be empty during load?

The reset, I should be able to do it from html itself and not from the controller.

Code below:

<form novalidate name="form.customForm">
      <div class="form-group">
        <div>
          <label>Name</label>
        </div>
        <div>
          <input type="text" name="name" ng-model="model.name" class="form-control" ng-required="true" />
          <span class="red" ng-show="(form.customForm.name.$touched && form.customForm.name.$error.required) || (form.customForm.name.$error.required &&     form.customForm.$submitted)">Name cannot be empty</span>
        </div>
      </div>

      <div class="form-group">
        <div>
          <label>Age</label>
        </div>
        <div>
          <input type="text" name="age" ng-model="model.age" class="form-control" ng-required="true" />
          <span class="red" ng-show="(form.customForm.age.$touched && form.customForm.age.$error.required) || (form.customForm.age.$error.required &&     form.customForm.$submitted)">Age cannot be empty</span>
        </div>
      </div>

      <button class="btn btn-primary" type="submit" ng-click="submit(form.customForm.$valid);">
        Submit
      </button>
      <button class="btn btn-default" type="button" ng-click="isForm = false;">
        Cancel
      </button>

</form>

Refer the demo.

Why don't you try ngMessage

Satheesh Natarajan
– Satheesh Natarajan

2016-08-09 08:01:22 +00:00
Commented Aug 9, 2016 at 8:01 — Satheesh Natarajan
– Satheesh Natarajan, Commented Aug 9, 2016 at 8:01

Abdul Mateen Mohammed · Accepted Answer · 2016-08-09 08:15:48Z

1

I would suggest you write the cancel button logic in the controller, are you sure you want to do it from the html itself?, you can use these statements to reset the form and fields.

form.customForm.$setPristine();
model = {};
form.customForm.$setUntouched();

The updated jsfiddle

answered Aug 9, 2016 at 8:15

Abdul Mateen Mohammed

1,8841 gold badge13 silver badges21 bronze badges

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

1 Comment

Shashank Over a year ago

thankx, exactly this i was looking for. I have tried with form.customForm.$setPristine(); and model = {};, but didn't do the setting of $setUntouched().

foobar443 · Accepted Answer · 2016-08-09 07:59:29Z

0

On click on Cancel button, you could set form.customForm.$submitted = false;

This will hide the error messages.

Your cancel button becomes:

 <button class="btn btn-default" type="button" 
  ng-click="isForm = false; form.customForm.$submitted = false;">
        Cancel
 </button>

See jsfiddle

answered Aug 9, 2016 at 7:59

foobar443

2,7874 gold badges25 silver badges31 bronze badges

Comments

Angelo Ortega · Accepted Answer · 2016-08-09 08:02:32Z

0

give the form a name:

<div ng-controller="BlaController as vm">
  <form name="vm.formOne">
  </form>
</div>

And in the controller do this: (thats how I made it work)

if (vm.formOne) {
  vm.formOne.$setPristine();
  vm.formOne.$setUntouched();
  vm.formOne.$commitViewValue();
}

answered Aug 9, 2016 at 8:02

Angelo Ortega

4764 silver badges9 bronze badges

Comments

Dan M. CISSOKHO · Accepted Answer · 2016-08-09 08:04:17Z

0

what about just change the cancel button type to "reset" ?? It's the easiest solution

<button class="btn btn-default" type="reset" ng-click="isForm = false;">
     Cancel
</button>

edited Aug 9, 2016 at 8:04

answered Aug 9, 2016 at 7:56

Dan M. CISSOKHO

1,0851 gold badge14 silver badges28 bronze badges

3 Comments

foobar443 Over a year ago

But it does not work. When showing the form again, the error messages are still displayed See fiddle

Dan M. CISSOKHO Over a year ago

in this case just add a cancel() function with "$setPristine();" as $scope.cancel = function(isValid) { $scope.form.customForm.$setPristine(); $scope.isForm = false; };

Dan M. CISSOKHO Over a year ago

(cannot edit the previous) the cancel function should not have parameter

Tuhin · Accepted Answer · 2016-08-09 08:14:53Z

0

 $scope.cancel = function(form){
   $scope.isForm = true;
   form.customForm.$submitted=false;
   form.customForm.name.$touched = false;
   form.customForm.age.$touched=false;
  }

 <button class="btn btn-default" type="button" ng-click="cancel(form)" ng-show="!isForm">

Fiddle Demo

Or

<button class="btn btn-default" type="button" ng-click="isForm = true;
   form.customForm.$submitted=false;
   form.customForm.name.$touched = false;
   form.customForm.age.$touched=false;" ng-show="!isForm">

Fiddle Demo

edited Aug 9, 2016 at 8:14

answered Aug 9, 2016 at 8:06

Tuhin

3,3932 gold badges18 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to reset a form in AngularJS post submit from HTML only?

5 Answers 5

1 Comment

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related