Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

docs(guide/Forms): add labels to forms #15403

Merged
merged 1 commit into from
Nov 17, 2016
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 32 additions & 23 deletions docs/content/guide/forms.ngdoc
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@ for other directives to augment its behavior.
<file name="index.html">
<div ng-controller="ExampleController">
<form novalidate class="simple-form">
Name: <input type="text" ng-model="user.name" /><br />
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 />
<label>Name: <input type="text" ng-model="user.name" /></label><br />
<label>E-mail: <input type="email" ng-model="user.email" /></label><br />
Gender: <label><input type="radio" ng-model="user.gender" value="male" />male</label>
<label><input type="radio" ng-model="user.gender" value="female" />female</label><br />
<input type="button" ng-click="reset()" value="Reset" />
<input type="submit" ng-click="update(user)" value="Save" />
</form>
Expand Down Expand Up @@ -88,10 +88,10 @@ and failing to satisfy its validity.
<file name="index.html">
<div ng-controller="ExampleController">
<form novalidate class="css-form">
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 />
<label>Name: <input type="text" ng-model="user.name" required /></label><br />
<label>E-mail: <input type="email" ng-model="user.email" required /></label><br />
Gender: <label><input type="radio" ng-model="user.gender" value="male" />male</label>
<label><input type="radio" ng-model="user.gender" value="female" />female</label><br />
<input type="button" ng-click="reset()" value="Reset" />
<input type="submit" ng-click="update(user)" value="Save" />
</form>
Expand Down Expand Up @@ -154,28 +154,32 @@ didn't interact with a control
<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="" />
<label>Name:
<input type="text" ng-model="user.name" name="uName" required="" />
</label>
<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="" />
<label>E-mail:
<input type="email" ng-model="user.email" name="uEmail" required="" />
</label>
<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
<label><input type="radio" ng-model="user.gender" value="male" />male</label>
<label><input type="radio" ng-model="user.gender" value="female" />female</label>
<br />
<label>
<input type="checkbox" ng-model="user.agree" name="userAgree" required="" />

I agree:
</label>
<input ng-show="user.agree" type="text" ng-model="user.agreeSign" required="" />
<br />
<div ng-show="form.$submitted || form.userAgree.$touched">
Expand Down Expand Up @@ -236,10 +240,11 @@ will update the model only when the control loses focus (blur event).
<file name="index.html">
<div ng-controller="ExampleController">
<form>
Name:
<input type="text" ng-model="user.name" ng-model-options="{ updateOn: 'blur' }" /><br />
<label>Name:
<input type="text" ng-model="user.name" ng-model-options="{ updateOn: 'blur' }" /></label><br />
<label>
Other data:
<input type="text" ng-model="user.data" /><br />
<input type="text" ng-model="user.data" /></label><br />
</form>
<pre>username = "{{user.name}}"</pre>
<pre>userdata = "{{user.data}}"</pre>
Expand Down Expand Up @@ -282,8 +287,8 @@ after last change.
<file name="index.html">
<div ng-controller="ExampleController">
<form>
Name:
<input type="text" ng-model="user.name" ng-model-options="{ debounce: 250 }" /><br />
<label>Name:
<input type="text" ng-model="user.name" ng-model-options="{ debounce: 250 }" /></label><br />
</form>
<pre>username = "{{user.name}}"</pre>
</div>
Expand Down Expand Up @@ -335,17 +340,19 @@ In the following example we create two directives:
<file name="index.html">
<form name="form" class="css-form" novalidate>
<div>
<label>
Size (integer 0 - 10):
<input type="number" ng-model="size" name="size"
min="0" max="10" integer />{{size}}<br />
min="0" max="10" integer />{{size}}</label><br />
<span ng-show="form.size.$error.integer">The value is not a valid integer!</span>
<span ng-show="form.size.$error.min || form.size.$error.max">
The value must be in range 0 to 10!</span>
</div>

<div>
<label>
Username:
<input type="text" ng-model="name" name="name" username />{{name}}<br />
<input type="text" ng-model="name" name="name" username />{{name}}</label><br />
<span ng-show="form.name.$pending.username">Checking if this name is available...</span>
<span ng-show="form.name.$error.username">This username is already taken!</span>
</div>
Expand Down Expand Up @@ -425,8 +432,10 @@ Note that you can alternatively use `ng-pattern` to further restrict the validat
<file name="index.html">
<form name="form" class="css-form" novalidate>
<div>
Overwritten Email:
<input type="email" ng-model="myEmail" overwrite-email name="overwrittenEmail" />
<label>
Overwritten Email:
<input type="email" ng-model="myEmail" overwrite-email name="overwrittenEmail" />
</label>
<span ng-show="form.overwrittenEmail.$error.email">This email format is invalid!</span><br>
Model: {{myEmail}}
</div>
Expand Down