Dynamically reset ng-form in Angular

Question

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?

Answer 1

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.

Answer 2

I don't see why not.

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

Answer 3

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]