第angular學(xué)習(xí)之淺析響應(yīng)式表單要注冊(cè)一個(gè)表單控件，就要導(dǎo)入FormControl類并創(chuàng)建一個(gè)FormControl的新實(shí)例，將其保存為類的屬性。如下：ponent.ts

/*****ponent.ts*****/

import{Component}from@angular/core

import{FormControl}from@angular/forms

@Component({

selector:app-name-editor,

templateUrl:./ponent.html,

styleUrls:[./ponent.CSS]

exportclassTestComponent{

//可以在FormControl的構(gòu)造函數(shù)設(shè)置初始值，這個(gè)例子中它是空字符串

name=newFormControl(

}

然后在模板中注冊(cè)該控件，如下：ponent.html

!--ponent.html--

label

Name:inputtype=text[formControl]=name

/label

!--input中輸入的值變化的話，這里顯示的值也會(huì)跟著變化--

pname:{{name.value}}/p

FormControl的其它屬性和方法，參閱API參考手冊(cè)。

/api/forms/FormControl#formcontrol

把表單控件分組FormGroup

就像FormControl的實(shí)例能讓你控制單個(gè)輸入框所對(duì)應(yīng)的控件一樣，F(xiàn)ormGroup的實(shí)例也能跟蹤一組FormControl實(shí)例（比如一個(gè)表單）的表單狀態(tài)。當(dāng)創(chuàng)建FormGroup時(shí)，其中的每個(gè)控件都會(huì)根據(jù)其名字進(jìn)行跟蹤。

看下例演示：ponent.ts、ponent.html

import{Component}from@angular/core

import{FormControl,FormGroup,Validators}from@angular/forms

@Component({

selector:app-test,

templateUrl:./ponent.html,

styleUrls:[./ponent.css]

exportclassTestComponentimplementsOnInit{

constructor(){}

profileForm=newFormGroup({

firstName:newFormControl(,[Validators.required,Validators.pattern([a-zA-Z0-9]*)]),

lastName:newFormControl(,Validators.required),

onSubmit(){

//查看控件組各字段的值

console.log(fileForm.value)

}

!--profileForm這個(gè)FormGroup通過FormGroup指令綁定到了form元素，在該模型和表單中的輸入框之間創(chuàng)建了一個(gè)通訊層--

!--FormGroup指令還會(huì)監(jiān)聽form元素發(fā)出的submit事件，并發(fā)出一個(gè)ngSubmit事件，讓你可以綁定一個(gè)回調(diào)函數(shù)。--

form[formGroup]=profileForm(ngSubmit)=onSubmit()

label

!--由FormControlName指令把每個(gè)輸入框和FormGroup中定義的表單控件FormControl綁定起來。這些表單控件會(huì)和相應(yīng)的元素通訊--

FirstName:inputtype=textformControlName=firstName

/label

label

LastName:inputtype=textformControlName=lastName

/label

buttontype=submit[disabled]=!profileForm.validSubmit/button

/form

p{{profileForm.value}}/p

!--控件組的狀態(tài)：INVALID或VALID--

p{{profileForm.status}}/p

!--控件組輸入的值是否為有效值：true或false--

p{{profileForm.valid}}/p

!--是否禁用：true或false--

p{{profileForm.disabled}}/p

FormGroup的其它屬性和方法，參閱API參考手冊(cè)。

/api/forms/FormGroup#formgroup

使用更簡(jiǎn)單的FormBuilder服務(wù)生成控件實(shí)例

在響應(yīng)式表單中，當(dāng)需要與多個(gè)表單打交道時(shí)，手動(dòng)創(chuàng)建多個(gè)表單控件實(shí)例會(huì)非常繁瑣。FormBuilder服務(wù)提供了一些便捷方法來生成表單控件。FormBuilder在幕后也使用同樣的方式來創(chuàng)建和返回這些實(shí)例，只是用起來更簡(jiǎn)單。

FormBuilder是一個(gè)可注入的服務(wù)提供者，它是由ReactiveFormModule提供的。只要把它添加到組件的構(gòu)造函數(shù)中就可以注入這個(gè)依賴。

FormBuilder服務(wù)有三個(gè)方法：control()、group()和array()。這些方法都是工廠方法，用于在組件類中分別生成FormControl、FormGroup和FormArray。

看下例演示：ponent.ts

import{Component}from@angular/core

//1、導(dǎo)入FormBuilder

import{FormBuilder,Validators}from@angular/forms

@Component({

selector:app-test,

templateUrl:./ponent.html,

styleUrls:[./ponent.css]

exportclassTestComponent{

//2、注入FormBuilder服務(wù)

constructor(privatefb:FormBuilder){}

ngOnInit(){}

profileForm=this.fb.group({

firstName:[,[Validators.required,Validators.pattern([a-zA-Z0-9]*)]],

lastName:[,Validators.required],

//相當(dāng)于

//profileForm=newFormGroup({

//firstName:newFormControl(,[Validators.required,Validators.pattern([a-zA-Z0-9]*)]),

//lastName:newFormControl(,Validators.required),

//});

onSubmit(){

console.log(fileForm.value)

console.log(fileForm)

}

對(duì)比可以發(fā)現(xiàn)，使用FormBuilder服務(wù)可以更方便地生成FormControl、FormGroup和FormArray，而不必每次都手動(dòng)new一個(gè)新的實(shí)例出來。

表單驗(yàn)證器Validators

Validators類驗(yàn)證器的完整API列表，參考API手冊(cè)

/api/forms/Validators

驗(yàn)證器（Validators）函數(shù)可以是同步函數(shù)，也可以是