O'Reilly logo

Mastering Web Application Development with AngularJS by Pawel Kozlowski, Peter Bacon Darwin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Resetting the User Info form

In our User Info form, we would like to cancel the changes and reset the form back to its original state. We do this by holding a copy of the original model with which we can overwrite any changes that the user has made.

Template:

<form name="userInfoForm">
  ...
  <button ng-click="revert()" ng-disabled="!canRevert()">Revert Changes</button>
</form>

Controller:

app.controller('MainCtrl', function($scope) {
  ...
  $scope.user = {
    ...
  };
  $scope.passwordRepeat = $scope.user.password;

  var original = angular.copy($scope.user);
  
  $scope.revert = function() {
    $scope.user = angular.copy(original);
    $scope.passwordRepeat = $scope.user.password;
    $scope.userInfoForm.$setPristine();
  };
  
  $scope.canRevert = function() {
 return !angular.equals($scope.user, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required