reset multiple form fields with AngularJS

Question

I am using the following code to reset a form field using a checkbox with AngularJS.

<input type="text" ng-model="data.test" ng-disabled="data.check">

<input type="checkbox" 
ng-change="data.test = data.check ? '' : data.test"
ng-model="data.check" 
value="one">

How would I use this code to reset multiple form fields?

Thanks,

John

you want to reset the form fields when the checkbox is checked? — Pandiyan Cool
– Pandiyan Cool, Commented Sep 5, 2016 at 18:04

Pandiyan Cool · Accepted Answer · 2016-09-05 18:17:20Z

1

Store the data in separate array and validator in another variable

<input type="text" ng-model="data.test" ng-disabled="clear.check">
<input type="text" ng-model="data.test_another" ng-disabled="clear.check">

<input type="checkbox" ng-change="data = clear.check ? {} : data"
ng-model="clear.check" value="one">

Once you want to reset the form data, you can directly assign empty array set to form data array

answered Sep 5, 2016 at 18:17

Pandiyan Cool

6,5838 gold badges53 silver badges90 bronze badges

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

4 Comments

John Higgins Over a year ago

I tried this code and it did not work. Was there something else I needed to add other than the above?

Pandiyan Cool Over a year ago

its working fine for me, check my plunker plnkr.co/edit/wrV9vZMdFqtlqtvLxWAA

John Higgins Over a year ago

It works! Not sure what I was doing wrong but it's working fine now.

John Higgins Over a year ago

Only problem I have now is that checked="checked" does not work on the checkbox. It looks like it's ng-model="clear.check" causing the problem?

damjtoh · Accepted Answer · 2016-09-05 18:10:04Z

0

You can use $setPristine() for resetting the field state.

HTML:

<form name="myForm">

    <input type="text" ng-model="data.test" ng-disabled="data.check">
    <input type="text" ng-model="data.test2" ng-disabled="data.check">
    <input type="checkbox" 
    ng-change="reset()"
    ng-model="data.check" 
    value="one">
</form>

JS:

$scope.resetForm = function() {
    $scope.data = {
        "test": "",
        "test2": ""
    };
    // 'myForm' is the name of the <form> tag.
    $scope.myForm.$setPristine();
}

answered Sep 5, 2016 at 18:10

damjtoh

3851 silver badge7 bronze badges

1 Comment

John Higgins Over a year ago

I tried your code and get a - Can't find variable: $scope error.

Collectives™ on Stack Overflow

reset multiple form fields with AngularJS

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related