kylefang/angular.js
1
0
Fork 0
mirror of https://github.com/zhigang1992/angular.js.git synced 2026-01-12 22:45:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(guide/forms): enhanced form examples to utilize $touched

Browse Source 
The "Binding to form and control state" example now makes use of
control states that were introduced in 1.3.
For example, users are now informed of validation requirements upon
clicking 'Save'.

Closes #10066
This commit is contained in:
Clay Anderson
2014-11-14 15:22:56 -07:00
committed by Martin Staffa
parent 2d6a0a1dc1
commit a1c5f2b4f0
1 changed files with 41 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
docs/content/guide/forms.ngdoc
View File

@@ -27,8 +27,8 @@ for other directives to augment its behavior.
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>
<input type="button" ng-click="reset()" value="Reset" />
<input type="submit" ng-click="update(user)" value="Save" />
</form>
<pre>form = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>
@@ -77,29 +77,29 @@ 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 an error until after interacting with the control, and failing to satisfy its validity.
with red background only after the input is blurred (loses focus).
This ensures that the user is not distracted with an error until after interacting with the control,
and failing to satisfy its validity.
<example module="formExample">
<file name="index.html">
<div ng-controller="ExampleController">
<form novalidate class="css-form">
Name:
<input type="text" ng-model="user.name" required /><br />
Name: <input type="text" ng-model="user.name" required /><br />
E-mail: <input type="email" ng-model="user.email" required /><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>
<input type="button" ng-click="reset()" value="Reset" />
<input type="submit" ng-click="update(user)" value="Save" />
</form>
</div>
<style type="text/css">
.css-form input.ng-invalid.ng-dirty {
.css-form input.ng-invalid.ng-touched {
background-color: #FA787E;
}
.css-form input.ng-valid.ng-dirty {
.css-form input.ng-valid.ng-touched {
background-color: #78FA89;
}
</style>
@@ -140,34 +140,45 @@ 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 the user interacted with a control (i.e. when `$touched` is set)
- Custom error message displayed upon submitting the form (`$submitted` is set), even if the user
didn't interact with a control
<example module="formExample">
<file name="index.html">
<div ng-controller="ExampleController">
<form name="form" class="css-form" novalidate>
Name:
<input type="text" ng-model="user.name" name="uName" required /><br />
<input type="text" ng-model="user.name" name="uName" required="" />
<br />
<div ng-show="form.$submitted || form.uName.$touched">
<div ng-show="form.uName.$error.required">Tell us your name.</div>
</div>
E-mail:
<input type="email" ng-model="user.email" name="uEmail" required/><br />
<div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
<input type="email" ng-model="user.email" name="uEmail" required="" />
<br />
<div ng-show="form.$submitted || form.uEmail.$touched">
<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>
Gender: <input type="radio" ng-model="user.gender" value="male" />male
<input type="radio" ng-model="user.gender" value="female" />female<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="" />
<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>
I agree:
<input ng-show="user.agree" type="text" ng-model="user.agreeSign" required="" />
<br />
<div ng-show="form.$submitted || form.userAgree.$touched">
<div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div>
</div>
<button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>
<button ng-click="update(user)"
ng-disabled="form.$invalid || isUnchanged(user)">SAVE</button>
<input type="button" ng-click="reset(form)" value="Reset" />
<input type="submit" ng-click="update(user)" value="Save" />
</form>
</div>
</file>
@@ -181,14 +192,14 @@ This allows us to extend the above example with these features:
$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();
}]);
</file>