如何创建一个数据模型，有定义在ngForms模块中三个类组成，FormControl,FormGroup,FormArray。
一.FromControl:构成表单的基本单位，代表input元素，可以代表日历，下拉选择框，保存着元素当前的值，校验状态，是否修改过
演示：如何创建FromControl?
表单.ts
userName: FormControl = new FormControl('AAA'); /* 接收一个参数，代表输入框的初始值，naModel会为附着的元素input创建FormContrl*/
二、FormGroup：可以代表表单一部分，也可以用与代表整个表单，是多个Formcontrol的集合。
一个Formcontrol是无效的，那个FormGroup也是无效的。日期范围字段。
演示;如何创建FormGroup?
formModel: FormGroup = new FormGroup({ // 创建的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')
])
介绍下指令
响应式表单指令与模板指令完全不同，来自于
ReactiveFormComponent
注意：1.指令是form开头，ng开头的是模板式表单；2.响应式form指令不可引用 #myForm="myform" .操作数据模型只能在代码中操作，模板指令是在代码中操作。
模板表单变响应式，通常用formGroup代表整个表单。
一.表单.html（formGroup代表整个表单）
<form [formGroup]="forModel" (submit)="onSubmit()"> <!--表单处理方式变成了响应式-->
<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({}）/*表示整个表单的数据*/
onSubmit() {
console.log(this.forModel.value);
}
二.formGroupName链接一个group：加数据
forModel: FormGroup = new FormGroup({ // 创建的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指令内
四、formAarryName
必须用在<form 的formGroup之内。
步骤1：将模板的ul和控制器的emails的formAarry里的formControl绑定了
formModel: FormGroup = new FormGroup({ // 创建的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;"><!--需要当前循环下标-->
<input type="text" [formControlName]="i"><!--和循环下标绑定子一起-->
</li>
</ul>
步骤2：点击按钮向eamils数组添加元素，添加输入框
addEmail() {
const emails = this.formModel.get('emails') as FormArray;
/*添加一个邮箱输入框，需要拿到FormAarry，*/
emails.push(new FormControl()); /*模板根据数组循环，数组多一个元素，多一个输入框*/
}
<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;"><!--需要当前循环下标-->
<input type="text" [formControlName]="i"><!--和循环下标绑定子一起-->
</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({ // 创建的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()); /*模板根据数组循环，数组多一个元素，多一个输入框*/
}
ngOnInit() {
}
}
<form [formGroup]="formModel" (submit)="onSubmit()"> <!--表单处理方式变成了响应式-->
<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;"><!--需要当前循环下标-->
<input type="text" [formControlName]="i"><!--和循环下标绑定子一起-->
</li>
</ul>
<button type="button" (click)="addEmail()">增加Email</button>
<button type="submit">保存</button>
</div>
</form>
注意：所有指令都是以form开头的。以name结尾，不需要使用【】，只需要指定名字；只能用在【formGroup】指令之内。
不以name结尾则用【】。
