Angular学习笔记46：响应式表单-使用FormBuild快速构建表单

最新推荐文章于 2024-04-15 09:43:14 发布

wujiayucn

最新推荐文章于 2024-04-15 09:43:14 发布

阅读量1.1k

点赞数

分类专栏： # Angular

本文链接：https://blog.csdn.net/wjyyhhxit/article/details/92087977

版权

Angular 专栏收录该内容

99 篇文章 67 订阅

订阅专栏

本文介绍了如何使用Angular的FormBuilder服务快速构建响应式表单，避免手动创建FormControl、FormGroup的繁琐过程。通过示例展示了如何重写validateForm，利用FormBuilder的group()方法构建FormGroup，并在组件的constructor中初始化，达到与之前相同的效果。

摘要由CSDN通过智能技术生成

继Angular学习笔记45：响应式表单-FormArray & 动态的增加、减少FormArray中的元素 & 给FormArray 赋值,可以使用angular创建一个 Array 一样的表单。
但是，每次创建一个Form实例的时候，都需要 new FormControl()、new FormGroup() 等非常的麻烦。这个时候，就可以使用FormBuilder服务来快速的生成表单控件。

使用 FormBuilder 将UserInfo 中的表单重新构造一下

使用 FormBuilder 之前的表单：validateForm

validateForm = new FormGroup({
    name: new FormControl(null, [Validators.required]),
    age: new FormControl(null, [Validators.required]),
    email: new FormControl(null, [Validators.required]),
    phone: new FormArray([new FormControl(null)]),
    address: new FormGroup({
      area: new FormControl(null, [Validators.required]),
      street: new FormControl(null, [Validators.required]),
      houseId: new FormControl(null, [Validators.required]),
    })
  });

使用 FormBuilder 重写validateFrom.

导入 FormBuilder 类

import {FormControl, Validators, FormGroup, FormArray, FormBuilder} from '@angular/forms';

注入 FormBuilder 的服务

constructor(private fb: FormBuilder) {
    this.validateForm.get('name').valueChanges.subscribe(nameChange => {
      console.log(nameChange);
    });
    this.addressForm.get('street')
      .valueChanges
      .subscribe(streetChange => {
        console.log(streetChange);
      });
    this.validateForm.get('address')
      .get('area').valueChanges
      .subscribe(areaChange => {
        console.log(areaChange);
      });
  }

重新生成表单控件
在FormBuilder 服务中中，有三个方法，分别是control() 、group() 、array() 、通过这三个方法，可以分别快速的生成 FormControl、FormGroup 和 FormArray。

由于上面的validateForm 是一个FormGroup，所以先使用FormBuilder构建出一个FormGroup中。
(将之前的代码暂时先注释了，在这里暂时删除)。

constructor(private fb: FormBuilder) {
    this.validateForm = this.fb.group({});
  }

在这个group中，按照之前的需要，重新生成：

validateForm: FormGroup;
constructor(private fb: FormBuilder) {
    this.validateForm = this.fb.group({
      name: [null, [Validators.required]],
      age: [null, [Validators.required]],
      email: [null, [Validators.required]],
      phone: this.fb.array([this.fb.control(null, [Validators.required])]),
      address: this.fb.group({
        area: [null, [Validators.required]],
        street: [null, [Validators.required]],
        houseId: [null, [Validators.required]],
      })
    });
  }

注意，这里是写在constructor()方法中，在声明validateForm的时候，就使用FormBuilder构造也是可以的。即：

validateForm = this.fb.group({
      name: [null, [Validators.required]],
      age: [null, [Validators.required]],
      email: [null, [Validators.required]],
      phone: this.fb.array([this.fb.control(null, [Validators.required])]),
      address: this.fb.group({
        area: [null, [Validators.required]],
        street: [null, [Validators.required]],
        houseId: [null, [Validators.required]],
      })
    });