angular.module('myApp', []) .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.isUnchanged = function(user) { return angular.equals(user, $scope.master); }; $scope.reset(); }]);
<div ng-app='myApp'> <div ng-controller="ExampleController"> <form name='form' novalidate class="css-form">Name: <input type="text" ng-model="user.name" name="uName" required /> <br />E-mail: <input type="email" ng-model="user.email" name="uEmail" required /> <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid: <span ng-show="form.uEmail.$error.required">Tell us your email.</span> <span ng-show="form.uEmail.$error.email">This is not a valid email.</span> </div> <br />Gender: <input type="radio" ng-model="user.gender" value="male" />male <input type="radio" ng-model="user.gender" value="female" />female <br /> <input type="checkbox" ng-model="user.agree" name="userAgree" required />I agree: <input ng-show="user.agree" type="text" ng-model="user.agreeSign" required /> <br /> <div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div> <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button> <button ng-click="update(user)" ng-disabled="form.$invalid || isUnchanged(user)">SAVE</button> </form> <pre>form = {{user | json}}</pre> <pre>master = {{master | json}}</pre> </div> </div>
.ng-scope { padding: 4px; background-color: #ddd; } .css-form input.ng-invalid.ng-dirty { background-color: #FA787E; } .css-form input.ng-valid.ng-dirty { background-color: #78FA89; }