CODEWITHSUNDEEP
angularjs
james
james

Reputation: 4573

Is there a generic way to completely reset an angularjs form?

Background

I'm trying to find a reliable, generic way to reset a form back to it's original clean state.

There's a basic example in the angularjs docs, which appears to be considered the defacto way to clear a form (i've also seen this same method repeated in other places). The problem is, it doesn't work unless either:

a) All of the form fields are valid

or

b) You define default values for all of the form input model values up front


Example

I'll use the actual form in the angularjs docs as an example:

https://docs.angularjs.org/guide/forms

If you scroll to the first form, fill in the name field and then fill in the email input with an invalid value, you'll see that (understandably) the 'email' property never gets assigned to the model. If you then click the 'reset' button, you'll see that the name input is reset to blank, but the email input remains the same.

So it doesn't appear that you can use this method reliably, as it only completely resets the form if all fields are actually valid.


Possible solution

One solution would be to define a default model upfront for every form and then use that to reset the form.

http://plnkr.co/edit/WCNC5keMDb8CGcvAt1Lp?p=preview

$scope.master = {
    name: '',
    email: ''         
}

But this doesn't feel DRY to me, as you're having to manually repeat the predefined ng-model values from your markup. And i've also got quite a few forms in my app and don't fancy having to add it to all controllers...


What i'm trying to achieve

Aswell as using $setPristine() and $setUntouched()to reset the state of a form, i also need to completely reset the forms model data, so that all inputs are reset to their original state.


Question

So before i go off and spend time writing an elaborate, over the top solution to this, I'm wondering if i'm not seeing the wood for the trees and there's actually an obvious solution?

Upvotes: 1

Views: 895

Answers (3)

rama k
rama k

Reputation: 1

try this code, it will reset your form to the last saved changes

<div ng-controller="ExampleController">
  <form novalidate class="simple-form">
    <label>Name: <input type="text" ng-model="user.name" /></label><br />
    <label>E-mail: <input type="email" ng-model="user.email" /></label><br />
    Gender: <label><input type="radio" ng-model="user.gender" value="male" />male</label>
    <label><input type="radio" ng-model="user.gender" value="female" />female</label><br />
    <input type="button" ng-click="reset()" value="Reset" />
    <input type="submit" ng-click="update(user)" value="Save" />
  </form>
</div>

<script>
  angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.master = {};

      $scope.update = function(user) {
        $scope.master = angular.copy(user);
      };

      $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
      };

      $scope.reset();
    }]);
</script>

Upvotes: 0

marco
marco

Reputation: 249

$setPristine() only resets the form model values. Since invalid form fields will not be bound to the model they will not be reset. You can use a button of type "reset" to clear a form completely:

<button type="reset" ng-click="reset()">Reset</button>

This also clears invalid form fields.

Upvotes: 0

Riad Baghbanli
Riad Baghbanli

Reputation: 3319

Providing initial or predefined state values for the model does not break DRY principles. In my opinion it is a good practice to have model states representing each defined state of your form, i.e.: working (model), master (initial values), blank (all fields blanked). So, you start out by setting your $scope.working = master, and then upon user request to blank the form you simply set $scope.working = blank.

Upvotes: 1

Related Questions