AngularJs submit form and reset $pristine state

Question

Taken this form as example http://plnkr.co/edit/fHEBw6dDdG3IVgnmCLb7?p=preview
How can I put the $pristine state of the form to true after the SAVE DRAFT button is pressed?

Answer 1

You can call $setPristine on the form: http://plnkr.co/edit/wXaFXtuhNH6d4SP2uArm?p=preview

<button ng-click="reset(); form.$setPristine()">RESET</button>
<button ng-click="update(user); form.$setPristine()">SAVE</button>

Or you can call the method in your controller (after ensuring that the form exists):

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

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

Demo: http://plnkr.co/edit/Mau7uuDfPlzcn418OdWh?p=preview

Answer 2

I've noticed that the reset() won't clear the email input unless it's valid. I've tried another approach instead:

<button type="reset" ng-click="form.$setPristine()">RESET</button>
<button ng-click="update(user); form.$setPristine()">SAVE</button>