angular4表单
FormGroup、FormControl、ngModel、name、ngForm。、
FormControl
表单最小的单元,表单项。涵盖了表单项的值和状态(藏值、是否有效等)。
FormGroup
统一管理所有的FormControl,相当于FormGroup的集合。使用formBuilder创建。
1 2 3 | let fg = formBuilder.group({ 'title' :[ '初始标题' ,校验器] }) |
input和ngModel
ngModel不仅可以双向绑定,而且使用后,会创建一个formControl对象,添加到父级formGroup中,并将这个formControl对象与input关联,通过name确定关系。
也就是说,使用ngModel和name可以与formGroup内的formControl进行绑定。
1 2 3 | <form> <input ngModel name= "title" /> </form><br> |
ngModel创建了名为title的formControl对象,与前面使用formBuilder创建的一致。
ngForm
ngForm在导入FormsModule后自动为form标签隐式添加,ngForm提供了两个功能
- ngSubmit
- 生成FomrGoup对象,可以使用 #f = “ngForm”,模板变量获取这个formGroup对象。
我们也可以自定义一个FormGroup对象
1 2 | <form [formGroup]= "myForm" > </form> |
当使用[formGroup]使用自己定义的formGroup,FormsModule就不会为由NgNofoim和formGoup指令存在的form标签隐式添加ngForm。
总结
如果想隐式创建formGroup和formControl,使用ngForm和ngModel
如果要自己显示指定创建,使用formGroup和formControl
通常我们使用第二种,并且需要双向绑定表单内容,因此
1 2 3 4 5 6 7 8 | <form [formGroup]= "myForm" > <input [(ngModel)]= "title1" [formControl]= "myForm.get('title')" /> </form> //JS title1:string; myForm = formBuilder.group({ 'title' :[ '' ,Validators.required] }) |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步