Angular之响应式表单和模板驱动表单

Posted by Shen Chaoran on November 23, 2017

模板驱动型表单

数据绑定

注意

  • ngForm下所有的input都需要一个name属性

响应式表单

  • FormControl:创建单一输入字段的表单控件,封装了控件的 value, status, valid 等
  • FormGroup:多个 FormControl 的map字典
  • FormArray:多个 FormControl 的数组
  • FormBuilder:快速构建表单的工具

表单控件的状态: valid: 通过表单验证器 invalid: 未通过表单验证器 pristine: 初始状态,在重置表单时,可以用 markAsPristine 标记 dirty: 控件值发生改变 touched: 移动端触摸状态 untouched: 移动端未触摸

自定义表单

将复杂表单拆分为几个简单表单,简单表单对外暴露api,就会降低整体的逻辑复杂度。

参考资料