理解Angular的Reactive Form

原文连接

官方文档并无说明Template-driven Form 与Reactive Form 哪个更好。因为以前开发过一个Ionic2项目，使用的是Template-driven Form，光是校验就有一坨代码，维护与开发简直惨不忍睹，因此我的更加推荐使用Reactive Form。

使用Reactive Form（同步），咱们会在代码中建立整个表单 form control 树。咱们能够当即更新一个值或者深刻到表单中的任意节点，由于全部的 Form control 都始终是可用的。并且由于是同步，有利于单元测试。

在Template-driven Form（异步）中，咱们是经过指令来建立 form control 的。咱们在操做一个Form control以前，必需要经历一个变化检测周期。

FormControl、FormGroup、FormArray

FormControl是最小单位(C),FormGroup相似于一个由FormControl(C)组件的object对象(G),FormArray(A)是一个由FormGroup(G)的Array数组。它们之间能够互相嵌套，以应对各式各样的表单模型(Form Model)。

addForm: FormGroup;

  constructor(public formBuilder: FormBuilder) {
    this.orderForm = this.formBuilder.group({
      name: ['', [Validators.required]],
      description: ['', [Validators.required]],
      other: this.formBuilder.group({
        name: ['', [Validators.required]],
        description: ['', [Validators.required]]
      }),
      items: this.formBuilder.array([
        this.formBuilder.group({
          name: ['', [Validators.required]],
          description: ['', [Validators.required]],
        }),
        this.formBuilder.group({
          name: ['', [Validators.required]],
          description: ['', [Validators.required]],
        }),
        this.formBuilder.group({
          name: ['', [Validators.required]],
          description: ['', [Validators.required]],
        })
      ])
    });
  }
  
复制代码

经过this.addForm.value获取的值:

{
  name:'',
  description:'',
  other: {
    name:'',
    description:'',
  },
  items: [
    {
      name:'',
      description:'',
    },
    {
      name:'',
      description:'',
    },
    {
      name:'',
      description:'',
    }
  ]
}
复制代码

它们三者之间的关系以下:

formGroup = 
{
  formControlName:formControl,
  formControlName:formControl,
  formControlName:formControl,
}

formArray = [
  formGroup,
  formGroup,
]= [
    {
      formControlName:formControl,
      formControlName:formControl,
      formControlName:formControl,
    },
    {
      formControlName:formControl,
      formControlName:formControl,
      formControlName:formControl,
    }
]
复制代码

对于使用Reactive Form时，动态增长formControl也是很方便的。这种在，好比添加出差明细等状况下很适合。 代码示例参考

data model与form model

来自服务器就是数据模型（data model），而FormControl的结构就是表单模型（form model）。

组件必须把数据模型中的英雄值复制到表单模型中。这里隐含着两个很是重要的点。

• 开发人员必须理解数据模型是如何映射到表单模型中的属性的。
• 用户修改时的数据流是从DOM元素流向表单模型的，而不是数据模型。表单控件永远不会修改数据模型。

我的经验:

1. 按照如此的划分，历来能够不依赖后端的数据结构(毕竟后端的数据格式是千奇百怪的)。
2. 表单模型最好和要提交的数据格式同样，数据的修改都是操做表单模型的 formControl。提交的时候不须要手动组装数据。
3. 因为以前的项目使用的是Template-driven Form，须要手动组装提交的数据，并且并无严格区分数据模型与表单模型，后期维护时，代码很乱。
4. 尽可能使用类型系统，不要图方便使用any，否则维护的时候，这酸爽！！！

setValue 与 patchValue

• setValue: 使用的时候须要每一个from control都要设置值。不然,ERROR Error: Must supply a value for form control with name: 'xxxxx'
• patchValue: 相似打补丁,不须要每一个from control都要设置值。