How to reset validation with angular on reset?

Question

In our angular application we have a form with validation and a reset button. We based it off of the examples in the documentation: https://docs.angularjs.org/guide/forms

The trouble happens when someone tries to reset the form when a field is in an invalid state. My expectation is that upon reset, the field should be reset to an initial value and any validation will also be reset. However, I haven't figured out how to clear the validationl.

This can be demonstrated in the aforementioned example from the documentation: https://docs.angularjs.org/guide/forms Load the demo and type in an invalid email address (potatoes) and then press reset. It resets valid fields, but not invalid. We have tried using $setPristine() and fiddling with $valid hasn't led anywhere either. This seems like a straight forward usecase, but I have not been able to find any answers. Please someone point how the trivial solution we have overlooked!

Update: added code from https://docs.angularjs.org/guide/forms

<div ng-controller="ExampleController">
  <form novalidate class="simple-form">
    Name: <input type="text" ng-model="user.name" /><br />
    E-mail: <input type="email" ng-model="user.email" /><br />
    Gender: <input type="radio" ng-model="user.gender" value="male" />male
    <input type="radio" ng-model="user.gender" value="female" />female<br />
    <button ng-click="reset()">RESET</button>
    <button ng-click="update(user)">SAVE</button>
  </form>
  <pre>form = {{user | json}}</pre>
  <pre>master = {{master | json}}</pre>
</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>

The code example in the documentation fails the same as my code. Should I duplicate the documentation example here? — pgreen2
– pgreen2, Commented Oct 11, 2014 at 22:12
You don't need to duplicate the documentation. It would be nice to see what you have done, however, to get an idea about what's going on. — Dr G.
– Dr G., Commented Oct 11, 2014 at 22:20
Looks like an issue to me that AngularJS ought to resolve. At some point, the model is getting unbound to the view because the model attribute is now undefined. — Angad
– Angad, Commented Oct 11, 2014 at 22:42
Possible duplicate of Angular clear subform data and reset validation — TheSharpieOne
– TheSharpieOne, Commented Jul 28, 2016 at 12:48

Mat · Accepted Answer · 2016-10-24 13:31:31Z

0

I had the same issue, and I found the solution here: https://github.com/angular/angular.js/issues/10027#issuecomment-62857430

The solution is to have all fields of the object set with empty value on the first place, and reset with the same kind of empty object instead of using {}.

Here a plunkr which show the solution: https://plnkr.co/edit/qKAI4OlmCbu2HNM237Z3?p=preview

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function ($scope) {
    function getEmpty() {
      return {
      name: '',
      contact: {email: ''}
    };
    }

    $scope.manufacturer = getEmpty();

    $scope.reset = function() {
      $scope.manufacturer = getEmpty()
      $scope.form.$setPristine();
      $scope.form.$setUntouched();
      $scope.form.$setValidity();
    }
  }]);

answered Oct 24, 2016 at 13:31

Mat

1851 silver badge11 bronze badges

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

Collectives™ on Stack Overflow

How to reset validation with angular on reset?

Update: added code from https://docs.angularjs.org/guide/forms

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update: added code from https://docs.angularjs.org/guide/forms

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related