angular4表单

FormGroup、FormControl、ngModel、name、ngForm。、

FormControl

表单最小的单元，表单项。涵盖了表单项的值和状态（藏值、是否有效等）。

FormGroup

统一管理所有的FormControl，相当于FormGroup的集合。使用formBuilder创建。

let fg = formBuilder.group({
    'title':['初始标题'，校验器]
})

input和ngModel

ngModel不仅可以双向绑定，而且使用后，会创建一个formControl对象，添加到父级formGroup中，并将这个formControl对象与input关联，通过name确定关系。

也就是说，使用ngModel和name可以与formGroup内的formControl进行绑定。

<form>
<input ngModel name="title"/>
</form>

　　ngModel创建了名为title的formControl对象，与前面使用formBuilder创建的一致。

ngForm

ngForm在导入FormsModule后自动为form标签隐式添加，ngForm提供了两个功能

ngSubmit
生成FomrGoup对象，可以使用 #f = “ngForm”，模板变量获取这个formGroup对象。

我们也可以自定义一个FormGroup对象

<form [formGroup]="myForm">
</form>

　　当使用[formGroup]使用自己定义的formGroup，FormsModule就不会为由NgNofoim和formGoup指令存在的form标签隐式添加ngForm。

总结

如果想隐式创建formGroup和formControl，使用ngForm和ngModel

如果要自己显示指定创建，使用formGroup和formControl

通常我们使用第二种，并且需要双向绑定表单内容，因此

<form [formGroup]="myForm">
<input  [(ngModel)]="title1" [formControl]="myForm.get('title')"/>
</form>
//JS
title1:string;
myForm = formBuilder.group({
   'title':['',Validators.required] 
})

猜你喜欢