理解Angular的Reactive Form

ck110
官方文档并没有说明Template-driven FormReactive 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都要设置值。
阅读 2.1k
119 声望
4 粉丝
0 条评论
119 声望
4 粉丝
文章目录
宣传栏