理解Angular的Reactive Form

大佬教程收集整理的这篇文章主要介绍了理解Angular的Reactive Form，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_874_0@使用Reactive Form（同步），我们会在代码中创建整个表单 form control 树。我们可以立即更新一个值或者深入到表单中的任意节点，因为所有的 Form control 都始终是可用的。而且因为是同步，有利于单元测试。

@H_874_0@在Template-driven Form（异步）中，我们是通过指令来创建 form control 的。我们在操作一个Form control之前，必须要经历一个变化检测周期。

FormControl、FormGroup、FormArray

@H_874_0@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: ['',other: this.formBuilder.group({
        name: ['',[Validators.required]]
      }),items: this.formBuilder.array([
        this.formBuilder.group({
          name: ['',}),this.formBuilder.group({
          name: ['',})
      ])
    });
  }

@H_874_0@通过this.addForm.value获取的值:

{
  name:'',description:'',other: {
    name:'',},items: [
    {
      name:'',{
      name:'',}
  ]
}

@H_874_0@它们三者之间的关系如下:

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

formArray = [
  formGroup,formGroup,]= [
    {
      formControlName:formControl,{
      formControlName:formControl,}
]

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

data model与form model

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

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

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

@H_874_0@个人经验:

@H_618_57@

按照如此的划分，从来可以不依赖后端的数据结构(毕竟后端的数据格式是千奇百怪的)。

表单模型最好和要提交的数据格式一样，数据的修改都是操作表单模型的 formControl。提交的时候不需要手动组装数据。

由于之前的项目使用的是Template-driven Form，需要手动组装提交的数据，而且并没有严格区分数据模型与表单模型，后期维护时，代码很乱。

尽量使用类型系统，不要图方便使用any，不然维护的时候，这酸爽！！！

SETVALue 与 patchValue

• SETVALue: 使用的时候需要每个from control都要设置值。否则,ERROR Error: Must supply a value for form control with name: 'xxxxx'
• patchValue: 类似打补丁,不需要每个from control都要设置值。

大佬总结

以上是大佬教程为你收集整理的理解Angular的Reactive Form全部内容，希望文章能够帮你解决理解Angular的Reactive Form所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。