angular提供了模板驱动和模型驱动两种方式来构建表单。模板驱动模式使用模板表单内置指令、内置校验的方式来构建表单；模型驱动模式采用自定义表单、自定义校验的方式来构建表单。
表单指令
NgForm指令
NgForm指令是表单的控制中心，负责处理表单内的页面逻辑，为普通的表单元素扩充了许多额外的特性，所有的表单指令都需要在NgForm指令内部才能正常运行。
首先要在根模块中添加FormsModule。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { FormComponent } from './form.component';
@NgModule({
imports:[
BrowserModule,
FormsModule //导入FormsModule
],
declarations:[
AppComponent,
FormComponent
],
bootstrap:[AppComponent]
})
export class AppModule {}
可以不用在模板中显式的使用NgForm指令，因为添加了FormsModule模块后，angular模板在编译解析时，遇到<form>标签会自动创建一个NgForm指令并且将其添加到该<form>标签上。
NgModel指令
angular表单支持单向和双向数据绑定，表单的单向数据绑定使用[ngModel]，双向数据绑定使用[(ngModel)]。
<input type="text" name="contactName" [ngModel]="curContact.name" />
<input type="text" name="contactName" [(ngModel)]="curContact.name" />
在控件中使用NgModel属性绑定，必须给该控件添加name属性，否则会报错。因为NgForm指令会为表单建立一个控件对象FormControl的集合，以此来作为表单控件的容器。控件的NgModel属性绑定会以name作为唯一标识符来注册并生成一个FormControl，将其加入到FormControl的集合中。
常用的表单控件：
单选框：单选框控件实现双向数据绑定，同一组单选框控件的所有[(ngModel)]属性都必须绑定同一个模型数据，且name属性名也必须相同。
<input type="radio" name="sex" [(ngModel)]="curContact.sex" value="female" />女
<input type="radio" name="sex" [(ngModel)]="curContact.sex" value="male" />男
当单击选项为“女”的单选框，curContact.sex会被赋值为female，若单击“男”单选框，则所对应的值为male。
复选框：复选框控件用来表示该表单复选框是否被选中，其中[(ngModel)]属性绑定的是一个布尔值。
<input type="checkbox" name="lock" [(ngModel)]="curContact.lock" />禁用
如果复选框被选中，则curContact.lock的值为true，否则为false。
单选下拉框：单选下拉框控件的双向数据绑定需结合option元素绑定的值来实现。option选项的元素属性的绑定目标有两种，分别为value和ngValue。当在option元素中使用value绑定数据时，其返回值类型是基本数据类型；当使用ngValue绑定数据时，其返回值类型是对象数据类型。
//定义下拉框所需所需数据
export class FormComponent {
interests:any[]=[
{value:'reading',display:'阅读'},
{value:'traveling',display:'旅游'},
{value:'sport',display:'运动'}
];
}
<select name="interestValue" [(ngModel)]="curContact.interestValue">
<option *ngFor="let interest of interests" [value]="interest.value">
{{interest.display}}
</option>
</select>
例子中，使用[value]来绑定下拉选项的value属性值，如果选中下拉选项框中的“旅游”项，那么curContact.interestValue的值将变为traveling。
单选框被选中后也可以返回对象类型的数据。
<select name="interestObj" [(ngModel)]="curContact.interestObj">
<option *ngFor="let interest of interests" [ngValue]="interest">
{{interest.display}}
</option>
</select>
当选中某个项目后，该下拉框最终返回一个Object类型的对象数据。如选中“旅游”项，则curContact.interestObj的值为{value:'traveling',display:'旅游'}。
多选下拉框：实现了下拉选择多个选项的功能，返回的数据是一个由所有被选项数据组成的数组。
<select multiple name="interestMul" [(ngModel)]="curContact.interestMul">
<option *ngFor="let interest of interests" [value]="interest.value">
{{interest.display}}
</option>
</select>
多选下拉框使用[value]来绑定下拉选项的value属性值，如果在多选下拉框中选中“旅游”和“运动”两项，则curContact.interestMul返回值为["traveling","sport"]。
多选下拉框还可以使用[ngValue]来绑定下拉选项的value属性值，如果在多选下拉框中选中“旅游”和“运动”两项，那么curContact.interestMul返回的数组对象为[{value:'traveling',display:'旅游'},{value:'sport',display:'运动'}]。
模板局部变量
模板局部变量是模板中对DOM元素或指令（包括组件）的引用，可以使用在当前元素、兄弟元素或任何子元素中。
DOM元素局部变量
若在标签元素中定义DOM元素局部变量，只需在其局部变量名前加上#或用ref-前缀。
<li>
<label for="name">姓名：</label>
<input type="text" #contactName name="contactName" id="contactName" />
<input type="number" ref-telNum name="telNum" id="telNum" />
<p>{{contactName.value}}--{{telNum.value}}</p>
</li>
angular会自动把局部变量设置为对当前DOM元素对象的引用，如上面的局部变量contactName引用的是document.getElementById("contactName")对象。在模板中定义局部变量后，可以直接在模板的其他元素中使用该元素的DOM属性，如contactName.value和telNum.value。
表单指令局部变量
表单指令也可以定义局部变量，其引用方式与DOM元素局部变量的引用方式不同。表单指令的局部变量在定义时需手动初始化为特定指令的代表值，最终解析后会被赋值为表单指令实例对象的引用。
NgForm表单局部变量
<form #contactForm="ngForm">
<ul>
<li>
<label for="contactName">姓名：</label>
<input type="text" name="contactName" [(ngModel)]="curContact.name" />
</li>
<li>
<label for="telNum">电话：</label>
<input type="text" name="telNum" [(ngModel)]="curContact.telNum" />
</li>
</ul>
</form>
局部变量contactForm为NgForm指令实例对象的引用，可以在模板中读取NgForm实例对象的属性值，如追踪表单的valid属性状态。当被包含的所有控件都有效时，contactForm.valid的值为true，否则为false。在控件中添加ngModel和name属性后，若往姓名控件中输入“李四”，电话控件输入“123456789”，则contactForm.value的值为：
{
name:"李四",
telNum:"123456789"
}
NgModel控件局部变量
<input type="text" name="contactName" [(ngModel)]="curContact.name"
#contactName="ngModel" />
<p>{{contactName.valid}}</p>
局部变量contactName是对NgModel指令实例对象的引用，可以在模板中读取NgModel实例对象的属性值，如通过contactName.valid可追踪控件状态、表单校验不通过时提示错误信息。
表单状态
表单NgForm和NgNodel指令都可以用于追踪表单状态来实现数据校验。表单NgForm和NgModel指令都有五个表示状态的属性，属性值都为布尔类型，并都可通过对应的局部变量获取。NgForm追踪的是整个表单控件的状态，NgModel追踪的是其所在表单控件的状态。
NgModelGroup指令
NgModelGroup指令可以对表单输入内容进行分组，方便我们在语义上区分不同类型的输入。
<form #concatForm="ngForm">
<fieldset ngModelGroup="nameGroup" #nameGroup="ngModelGroup">
<label>姓：</label>
<input type="text" name="firstname" [(ngModel)]="curContact.firstname" required />
<label>名字：</label>
<input type="text" name="lastname" [(ngModel)]="curContact.lastname" required />
</fieldset>
<fieldset ngModelGrooup="addressGroup" #addressGroup="ngModelGroup">
<label>街：</label>
<input type="text" name="street" [(ngModel)]="curContact.street" required />
<label>区：</label>
<input type="text" name="zip" [(ngModel)]="curContact.zip" required />
<label>城市：</label>
<input type="text" name="city" [(ngModel)]="curContact.city" required />
</fieldset>
</form>
concatForm.value的值为：
{
nameGourp:{
firstname:'',
lastname:''
},
addressGroup:{
street:'',
zip:'',
city:''
}
}
NgModelGroup实例对象的valid属性可以单独校验其所在分组控件的输入是否有效。如上例中只有当curContact.firstname、curContact.lastname输入都有效时，局部变量nameGroup.valid才会变成true，否则为false。
ngSubmit事件
ngSubmit事件可以响应表单里类型为submit的按钮操作，并负责控制表单的提交流程。当按钮被单机后，会触发表单的ngSubmit事件。
<form #contactForm="ngForm" (ngSubmit)="doSubmit(contactForm.value)">
<li class="form-group">
<button type="submit" class="btn btn-default" [disabled]="!contactForm.valid">添加</button>
<button type="reset" class="btn btn-default">重置</button>
</li>
</form>
export class FormComponent{
doSubmit(formValue:any){
//处理表单数据并提交
}
}
ngSubmit事件的类型是EventEmitter。当提交按钮被点击后，首先执行表单原生的onSubmit事件，接着执行FormComponent组件中定义的doSubmit()方法，该方法接收contactForm.value的值作为参数传入，并对传入的数据进行处理。
自定义表单样式
NgModel指令不仅能追踪表单控件的状态，还会根据表单控件的状态使用对应的CSS状态类来更新表单控件的类名。表单控件包括6个CSS状态类。
表单控件的CSS类名会根据表单控件状态变化而变化。
.ng-valid[required]{
border-left:5px solid #0f0;
}
.ng-valid{
border-left:5px solid #f00;
}
还可结合控件的状态属性valid、pristine、dirty、touched、untouched等来添加有用的消息提示，以此来对用户进行有效的引导。
<div class="form-group">
<label for="contactName">姓名：</label>
<input type="type" class="form-control" minlength=3 maxlength=10
[(ngModel)]="curContact.name" name="contactName"
#contactName="ngModel" required />
<p [hidden]="contactName.valid||contactName.pristine" class="alert alert-invalid">
用户名长度3-10个字符
</p>
</div>
表单校验
表单内置校验
angular支持的表单内置校验包括：
- required：判断表单控件值是否为空
- minlength：判断表单控件值的最小长度
- maxlength：判断表单控件值的最大长度
- pattern：判断表单控件值的匹配规则
<input type="text" minlength=3 maxlength=10 [(ngModel)]="curContact.name" name="contactName" required />
可以在<form>标签中添加novalidate属性来屏蔽HTML的拦截校验。
表单自定义校验
创建自定义校验
下面定义一个用户名的校验器，校验规则为：用户名必须是邮箱、手机号码的格式。
//validate-username.ts
import { FormControl } from '@angular/forms';
const EMAIL_REGEXP=new RegExp("[a-z0-9]+@[a-z0-9]+.com");
const TEL_REGEXP=new RegExp("1[0-9]{10}");
export function validateUserName(c:FormControl){
return (EMAIL_REGEXP.test(c.value)||TEL_REGEXP.test(c.value))?null:{
userName:{
valid:false,
errorMsg:'用户名必须是手机号或邮箱帐号'
}
}
}
自定义校验函数传入的参数是FormControl类，通过对FormControl的value值进行校验处理，返回校验结果。
使用自定义校验
使用模型驱动方式构建表单，需在表单组件所在的模块代码中导入ReactiveFormsModule，并在模块的@NgModule元数据imports数组中加入ReactiveFormsModule。
import { ReactiveFormsModule } from '@angular/forms';
import { FormComponent } from './form.component';
import { AppComponent } from './app.component';
@NgModule({
imports:[BrowserModule,ReactiveFormsModule],
declarations:[AppComponent,FormComponent],
bootstrap:[AppComponent]
})
export class AppModule {}
导入ReactiveFormsModule后，可在表单组件FormComponent中使用模型驱动方式构建表单。
import { Component } from '@angular/core';
import { FormGroup,FormControl } from '@angular/forms';
import { validateUserName } from './validate-username';
@Component({
selector:'add-contact',
template:`
<form [formGroup]="customForm">
<label>姓名：</label>
<input type="text" formControlName="customName" />
</form>
`
})
export class FormComponent{
customForm=new FormGroup({
customName:new FormControl('',validateUserName)
});
}
在构建FormControl实例对象customName时传入的参数中，第一个参数为控件返回值的初始值，第二个参数为该控件的校验配置方法。
此外，校验配置可以使用Validators的内置校验，如Validators.required()等，这与直接在表单控件元素中添加required属性效果一致。使用Validators内置校验，需先从@angular/forms导入Validators。
import { Validators } from '@angular/forms';
customForm=new FormGroup({
customName:new FormControl('',Validators.minLength(4))
});
如果需要在一个表单中添加多个校验器，可以在校验配置参数中使用数组，数组元素为对应的校验方法。
customForm=new FormGroup({
customName:new FormControl('',[Validators.minLength(4),ValidateUserName])
});
