ng2表单 (摘自《揭秘Angular2》）

原文出处：https://www.jianshu.com/p/6e34c13138e7|

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状态类名

表单控件的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])
});

小礼物走一走，来简书关注我

作者：oWSQo
链接：https://www.jianshu.com/p/6e34c13138e7
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。