AngularJS Form表单

AngularJS 表单，表单是输入字段、按钮、复选框等控件的集合，这些控件可以进行实时验证。只要表单的用户写完一个字段并移动到下一个字段，得到验证并提示用户可能出错的地方。一个表单可以由许多控件组成。

1. 文本框
2. 复选框
3. 单选框
4. 按钮
5. 选择框（下拉菜单）

1)文本框：

语法：

<input type="text" value="name" ng-model="name" placeholder="name">

可以添加各种约束来进行验证，我们也可以使用placeholder描述输入字段预期值的提示信息，方便用户输入正确的信息。

app.module.ts

import { FormsModule } from '@angular/forms'; 

imports: [
    BrowserModule,
    FormsModule,
  ],

在创建表单时需要添加引用。

示例 #1：

app.component.html

<form>
		<div class="form-group">
			<label for="firstName">Name</label>
			<input type="text"
			id="firstName"
			placeholder="Name">
	</div>
		<div class="form-group">
			<label for="email">Email</label>
			<input
			type="text"
			id="email"
			placeholder="Email">
		</div>	
		<div class="form-group">
			<label for="password">Password</label>
			<input
				type="password"
				id="password"
				placeholder="Password">
		</div>
		<div class="form-group">
			<label for="phone">mobile</label>
			<input
			type="text"
			id="phone"
			ngModel name="phone"
			#phone="ngModel"
			placeholder="Mobile">
		</div>
	</form>
	<p>{{ phone.value }}</p>

我们通过双向绑定将输入框中写入的值存储在一个变量中，方便使用。

输出：

示例#2 复选框：

app.component.html

<form>
	<input id="myVar" type="checkbox" ngModel name="myVar" #myVar="ngModel">
	<p>The checkbox is selected: {{myVar.value}}</p>
<br />
	<select ngModel name="mychoice" #myChoice="ngModel">
		<option>A</option>
		<option>E</option>
		<option>I</option>
		<option>O</option>
		<option>U</option>
	</select>
	<p>The selected option from Dropdown {{ myChoice.value }}</p>
</form>

输出

示例 #3（单选按钮）：

app.component.html

<form>
	<p>Select a radio button to know which Vowel it is associated to:</p>
	<input value="A" type="radio" ngModel name="myVar" #myVar="ngModel">
	<input value="E" type="radio" ngModel name="myVar" #myVar="ngModel">
	<input value="I" type="radio" ngModel name="myVar" #myVar="ngModel">
	<input value="O" type="radio" ngModel name="myVar" #myVar="ngModel">
	<input value="U" type="radio" ngModel name="myVar" #myVar="ngModel">
<br/><button *ngIf='myVar.touched'>Submit</button>
</form>
<p>You have selected: {{myVar.value}}</p>

在此代码中，该按钮仅在选择其中一个单选按钮后才可见。

选择前：

选择后：

我们可以向所有输入类型添加验证，并使表单具有响应性。