Angular4的表单

Angular4的表单分为两种，一个是模板式表单，另外一种是响应式表单。
首先先讲一下数据模型：数据模型不是任意一种对象，是一种用于存储表单数据的数据结构。
模板式表单
该表单的数据模型是由组件模板上相关的指令定义（隐式建立）的，由于使用了这种方式定义表单的数据模型会受限于html语法，因此只适合用于一些简单的场景。
模板式表单有三个api：ngForm、ngModel、ngModelGroup（这三个api在模板上均可以使用模板本地变量进行实例化，所以能够将该模板本地变量传进控制器）
==>（先讲一下，ngForm、ngModel这两个指令在模板上是直接添加在标签上便可）
首先讲一下ngForm：
ngForm是表明了整个form表单，在建立form表单的时候，angular会自动添加到form标签上（等同于<form ngForm></form>）
其工做原理是：建立了ngForm后，angular会隐式建立一个FormGroup类的实例，而后ngForm会寻找其子元素中标有ngModel的标签的值，并添加在FormGroup中。而后页面上便可经过ngForm这个对象访问到表单数据。由于ngForm可使用模板本地变量引用，故可使用（ngSubmit）=“xxx（#ngForm）”事件进行传递到控制器。
固然，不必定要在form表单使用ngForm，能够在div等标签内使用，此时须要手动添加指令。
若是不想被Angular接收表单，能够添加ngNoForm指令便可。
ngModel
该指令表示了表单内的一个控件。刚刚说到的ngForm会寻找表单内有ngModel的标签，就是说这个标签。
该标签的工做原理是：添加了该指令后，angular会隐式建立一个FormControl类，用于存储其值。
这个指令是直接添加到标签上

<input ngModel name="text">1复制代码

可是还要添加name属性（由于这个ngModel标志的控件的值会被添加到FormGroup中，而FormGroup的参数是个对象，对象必需要有key）。
固然这个指令也可使用模板本地变量，一样也能够经过该变量得到其值

<input #text="ngModel" name="text">1复制代码

ngModelGroup
该指令表示的是表单的一部分，即多个ngModel的集合。用于区分开来某些特别的ngModel控件。
其工做原理与ngForm相似，也是隐式建立一个FormGroup类用于存储其包括的控件的值。其在ngForm中的表现为嵌套。
不过他的用法是须要赋值一个名称（用于存储在ngForm中）

响应式表单
使用响应式表单时，经过编写typescript而不是html代码建立一个底层数据模型，在这数据模型定义以后，使用一些特定指令将模板的html代码与数据模型进行链接起来。
因此使用响应式表单分为两步：
（1）编码建立一个底层数据模型；
（2）使用特定的指令将模板的html代码与数据模型进行链接起来。
首先讲一下建立底层数据模型
Angular/forms提供三个类进行建立底层数据模型：FormControl、FormGroup、FormArray

FormControl
这个类是响应式表单的基本单位，也就是每一个表单控件都要定义一个该类。

userName:FormControl=new FormControl("aaa")1复制代码

其内的参数表示该控件的初始值

FormGroup

myForm:FormGroup=new FormGroup({})1复制代码

该类能够用于表示整个表单、也能够用于表示部分表单
该类的参数内是一个对象，期内保存了该类包括的控件（FormControl）的值（是一组key:value对）

FormArray

partForm:FormArray=new FormArray([])1复制代码

该类和FormGroup相似，也是一些控件的集合，可是和其区别是，FormArray是表示的是可增加的字段集合，而FormGroup是固定字段集合。
（使用场景：在表单中可能有多个email要添加，此时就可使用该类进行包括）
其参数值是个数组，因此通常会与*ngFor一块儿用

再讲一下链接的表单指令
表单指令有两种：属性绑定指令、属性名定义指令
FormGroup—>formGroup—>formGroupName
FormControl—>formControl—>formControlName
FormArray—>null—>formArrayName
（记得一点，对于属性名指令是必定要早formGroup范围内使用）
这些指令都是在模板中使用。
首先先建立一个FormGroup类的数据模型，该数据模型会表明了整个表单。所以在模板中form标签内添加一个属性绑定，即

<form [formGroup]="myForm">1复制代码

而该FormGroup类实例的参数–>{},内就是存放该表单内的全部控件的值（也就是FormControl和FormArray的控件）。
而后在定义了formGroup属性的表单内，每一个控件都要定义其名字，使用的指令就是FormGroupName、FormControlName、FormArrayName这三种指令。

<form [formGroup]="formModel" (submit)="onSubmit()">
    <div formGroupName="dateRange">
        起始日期:<input type="date" formControlName="from">
        截止日期:<input type="date" formControlName="to">
    </div>
    <div>
        <ul formArrayName="emails">
            <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()">增长邮箱</button>
    </div>
    <div>
        <button type="submit">提交</button>
    </div>
</form>1234567891011121314151617复制代码

讲一下对于取得FormGroup实例对象内的参数对象内的控件名称对应的值的方法：this.formModel.get(‘emails’)；用get()方法