CODEWITHSUNDEEP
javascriptangularjs
DeanMWake
DeanMWake

Reputation: 923

Dynamically reset ng-form in Angular

I have taken a look at the following: Reset Form in AngularJS and Angular clear subform data and reset validation from these I am trying to create a dynamic form reset/clear function which would look like something like the following:

$scope.clearSection = function(formName){

    $scope.formName.$setPristine();
    $scope.formName.$setUntouched();
};

Is it possible to create a dynamic clear function like this in angular where the form name is dynamically passed to this function?

Upvotes: 7

Views: 4004

Answers (3)

Carl Ambroselli
Carl Ambroselli

Reputation: 646

Example plunkr: http://plnkr.co/edit/lnGym0vKsANL6oks30RG

$scope.resetForm = function(formName) {
  var form = $scope[formName];
  form.$setUntouched();
  form.$setPristine();
}

Note: You still need to reset the input values!

According to the docs:

https://docs.angularjs.org/api/ng/type/form.FormController

$setPristine(); Sets the form to its pristine state.

This method can be called to remove the 'ng-dirty' class and set the form to its pristine state (ng-pristine class). This method will also propagate to all the controls contained in this form.

Setting a form back to a pristine state is often useful when we want to 'reuse' a form after saving or resetting it.

$setUntouched(); Sets the form to its untouched state.

This method can be called to remove the 'ng-touched' class and set the form controls to their untouched state (ng-untouched class).

Setting a form controls back to their untouched state is often useful when setting the form back to its pristine state.

$setPristine and $setUntouched only change the classes of the form controls, not the values. That means you still need to reset the values.

Upvotes: 6

Patrick
Patrick

Reputation: 17973

Well yes.

In JavaScript you can access variables of an object using the [] notation. Take the following example

var str = 'hello';
var obj = { hello: 'a' };
console.info(obj[str]); // outputs 'a'

so if formName is a string, you can simply get the property of the scope using 

var form = $scope[formName]

Upvotes: 1

laszlokiss88
laszlokiss88

Reputation: 4071

I don't see why not.

$scope.clearSection = function(formName){
    var frm = $scope[formName];
    frm.$setPristine();
    frm.$setUntouched();
};

Upvotes: 3

Related Questions