如何創(chuàng)建一個數(shù)據(jù)模型，有定義在ngForms模塊中三個類組成，F(xiàn)ormControl,FormGroup,FormArray。
一.FromControl:構(gòu)成表單的基本單位，代表input元素，可以代表日歷，下拉選擇框，保存著元素當(dāng)前的值，校驗(yàn)狀態(tài)，是否修改過
演示：如何創(chuàng)建FromControl?
表單.ts
userName: FormControl = new FormControl('AAA'); /* 接收一個參數(shù)，代表輸入框的初始值，naModel會為附著的元素input創(chuàng)建FormContrl*/
二、FormGroup：可以代表表單一部分，也可以用與代表整個表單，是多個Formcontrol的集合。
一個Formcontrol是無效的，那個FormGroup也是無效的。日期范圍字段。
演示;如何創(chuàng)建FormGroup?
formModel: FormGroup = new FormGroup({ // 創(chuàng)建的formGroup
form: new FormControl(), // 日期范圍
to: new FormControl()
})
三、FormArray：FormGroup類似，有一個長度屬性。代表可以增長的字段集合。，有email，多個郵箱，可以用這個輸入任意一個。
emails: FormArray = new FormArray([ /*與FormGroup的formContrl不同的是，沒有key,托序號來訪問,第一個序號就是0，，*/
new FormControl('aa@df.com'),
new FormControl('BB@DD.COM')
])
介紹下指令
響應(yīng)式表單指令與模板指令完全不同，來自于
ReactiveFormComponent
注意：1.指令是form開頭，ng開頭的是模板式表單；2.響應(yīng)式form指令不可引用 #myForm="myform" .操作數(shù)據(jù)模型只能在代碼中操作，模板指令是在代碼中操作。
模板表單變響應(yīng)式，通常用formGroup代表整個表單。
一.表單.html（formGroup代表整個表單）
<form [formGroup]="forModel" (submit)="onSubmit()"> <!--表單處理方式變成了響應(yīng)式-->
<div>
起始日期<input type="date">
截止日期<input type="date">
</div>
<div>
<ul>
<li>
<input type="text">
</li>
</ul>
<button type="button">增加Email</button>
</div>
<div>
<button type="submit">保存</button>
</div>
</form>
表單.ts
forModel: FormGroup = new FormGroup({}）/*表示整個表單的數(shù)據(jù)*/
onSubmit() {
console.log(this.forModel.value);
}
二.formGroupName鏈接一個group：加數(shù)據(jù)
forModel: FormGroup = new FormGroup({ // 創(chuàng)建的formGroup
dateRange: new FormGroup({
form: new FormControl(), // 日期范圍
to: new FormControl()
})
}) ;
<div formGroupName="dateRange">
起始日期<input type="date" formControlName="from">
截止日期<input type="date" formControlName="to">
</div>
效果：能把日期控件的值保存。（[formGroup]="forModel"是后臺的屬性，formGroupName的值是一個字符串）
三、formControlName的值也是一個字符串,用在formGroupName指令內(nèi)
四、formAarryName
必須用在<form 的formGroup之內(nèi)。
步驟1：將模板的ul和控制器的emails的formAarry里的formControl綁定了
formModel: FormGroup = new FormGroup({ // 創(chuàng)建的formGroup
dateRange: new FormGroup({
form: new FormControl(), // 日期范圍
to: new FormControl()
}),
emails: new FormArray([/*只有順序號，和ngFor一起使用*/
new FormControl('aa.com'),
new FormControl('bb.com')
])
}) ;
<ul formArrayName="emails"> <!--和ts綁定--><!--this.formModel.get('emails').controls 控制器i的emai集合-->
<li *ngFor="let e of this.formModel.get('emails').controls; let i=index;"><!--需要當(dāng)前循環(huán)下標(biāo)-->
<input type="text" [formControlName]="i"><!--和循環(huán)下標(biāo)綁定子一起-->
</li>
</ul>
步驟2：點(diǎn)擊按鈕向eamils數(shù)組添加元素，添加輸入框
addEmail() {
const emails = this.formModel.get('emails') as FormArray;
/*添加一個郵箱輸入框，需要拿到FormAarry，*/
emails.push(new FormControl()); /*模板根據(jù)數(shù)組循環(huán)，數(shù)組多一個元素，多一個輸入框*/
}
<div>
<ul formArrayName="emails"> <!--和ts綁定--><!--this.formModel.get('emails').controls 控制器i的emai集合-->
<li *ngFor="let e of this.formModel.get('emails').controls; let i=index;"><!--需要當(dāng)前循環(huán)下標(biāo)-->
<input type="text" [formControlName]="i"><!--和循環(huán)下標(biāo)綁定子一起-->
</li>
</ul>
<button type="button" (click)="addEmail()">增加Email</button>
<button type="submit">保存</button>
</div>
效果：就增加了郵箱輸入框，保存成功
五formControl
只能用在form外部
export class ReactiveFormComponent implements OnInit {
formModel: FormGroup = new FormGroup({ // 創(chuàng)建的formGroup
userName: new FormControl('aaa'),
dateRange: new FormGroup({
form: new FormControl(), // 日期范圍
to: new FormControl()
}),
emails: new FormArray([/*只有順序號，和ngFor一起使用*/
new FormControl('aa.com'),
new FormControl('bb.com')
])
}) ;
/*emails: FormArray = new FormArray([ /!*與FormGroup的formContrl不同的是，沒有key,托序號來訪問,第一個序號就是0，，*!/
new FormControl('aa@df.com'),
new FormControl('BB@DD.COM')
]);*/
constructor() { }
onSubmit() {
console.log(this.formModel.value);
}
addEmail() {
const emails = this.formModel.get('emails') as FormArray;
/*添加一個郵箱輸入框，需要拿到FormAarry，*/
emails.push(new FormControl()); /*模板根據(jù)數(shù)組循環(huán)，數(shù)組多一個元素，多一個輸入框*/
}
ngOnInit() {
}
}
<form [formGroup]="formModel" (submit)="onSubmit()"> <!--表單處理方式變成了響應(yīng)式-->
<input formControlName="userName">
<div formGroupName="dateRange">
起始日期<input type="date" formControlName="from">
截止日期<input type="date" formControlName="to">
</div>
<div>
<ul formArrayName="emails"> <!--和ts綁定--><!--this.formModel.get('emails').controls 控制器i的emai集合-->
<li *ngFor="let e of this.formModel.get('emails').controls; let i=index;"><!--需要當(dāng)前循環(huán)下標(biāo)-->
<input type="text" [formControlName]="i"><!--和循環(huán)下標(biāo)綁定子一起-->
</li>
</ul>
<button type="button" (click)="addEmail()">增加Email</button>
<button type="submit">保存</button>
</div>
</form>
注意：所有指令都是以form開頭的。以name結(jié)尾，不需要使用【】，只需要指定名字；只能用在【formGroup】指令之內(nèi)。
不以name結(jié)尾則用【】。
