diff --git a/docs/content/guide/forms.ngdoc b/docs/content/guide/forms.ngdoc index 370ffbe3f5c7..8be57fb8f271 100644 --- a/docs/content/guide/forms.ngdoc +++ b/docs/content/guide/forms.ngdoc @@ -27,8 +27,8 @@ for other directives to augment its behavior. E-mail:
Gender: male female
- - + +
form = {{user | json}}
master = {{master | json}}
@@ -77,29 +77,28 @@ To allow styling of form as well as controls, `ngModel` adds these CSS classes: The following example uses the CSS to display validity of each form control. In the example both `user.name` and `user.email` are required, but are rendered -with red background only when they are dirty. This ensures that the user is not distracted +with red background only when they are touched. This ensures that the user is not distracted with an error until after interacting with the control, and failing to satisfy its validity.
- Name: -
+ Name:
E-mail:
Gender: male female
- - + +
@@ -140,34 +139,44 @@ the view using the standard binding primitives. This allows us to extend the above example with these features: -- RESET button is enabled only if form has some changes -- SAVE button is enabled only if form has some changes and is valid -- custom error messages for `user.email` and `user.agree` +- Custom error message displayed after interacting with a control (i.e. `$touched`) +- Custom error message displayed upon submitting the form even if user didn't interact with a control (i.e. `$submitted`) +
Name: -
+ +
+
+
Tell us your name.
+
+ E-mail: -
-
Invalid: + +
+
Tell us your email. This is not a valid email.
- Gender: male - female
- - - I agree:
-
Please agree and sign.
- - - + Gender: + male + female +
+ + + I agree: + +
+
+
Please agree and sign.
+
+ + +
@@ -176,19 +185,19 @@ This allows us to extend the above example with these features: angular.module('formExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.master = {}; - + $scope.update = function(user) { $scope.master = angular.copy(user); }; - - $scope.reset = function() { + + $scope.reset = function(form) { + if (form) { + form.$setPristine(); + form.$setUntouched(); + } $scope.user = angular.copy($scope.master); }; - - $scope.isUnchanged = function(user) { - return angular.equals(user, $scope.master); - }; - + $scope.reset(); }]);