[Angular]——创建表单之FormArray、FormGroup

最新推荐文章于 2024-08-08 18:58:30 发布

虽菜但瘾

最新推荐文章于 2024-08-08 18:58:30 发布

阅读量1.8k

点赞数

分类专栏： Angular 文章标签： angular2

本文链接：https://blog.csdn.net/sungoodluck666/article/details/109334760

版权

本文介绍了在Angular中如何使用FormArray和FormGroup创建动态表单，特别是处理对象和数组数据类型的情况。通过实例展示了在创建个人信息表单时，如何提交姓名、年龄、家庭成员信息（数组）及家庭住址（对象）。文章提醒在动态添加和删除表单控件时需要注意唯一标识和索引问题，以避免数据错乱。

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

简述

表单的三大基本构造块：FormGroup 、 FormControl、FormArray 。

FormGroup 把每个子 FormControl 的值聚合进一个对象，它的 key 是每个控件的名字。它通过归集其子控件的状态值来计算出自己的状态。比如，如果组中的任何一个控件是无效的，那么整个组就是无效的。

FormArray 聚合了数组中每个表单控件的值。它还会根据其所有子控件的状态总结出自己的状态。比如，如果 FromArray 中的任何一个控件是无效的，那么整个数组也会变成无效的。

简要概述就是在创建表单时，有些数据格式并不是单单的字符串和数值类型的，可能是对象或者是数组，这时候就能用上表单的FormArray和FormGroup，以达到快速获取表单值并提交对应的数据类型。

一、场景

假如我们需要提交个人信息，信息需要提交你和家人的姓名和年龄，以及家庭住址。
表单页

想到类似的表单页，就简要的写了一个，其中个人信息的姓名和年龄按照正常的字符串提交，家庭信息以数组方式提交，家庭地址按照对象提交。

实现

form.component.html

<!--ant卡片组件-->
<nz-card>
  <form nz-form [formGroup]="formData">
  <!--个人信息-->
    <nz-divider nzText="个人信息" nzOrientation="left"></nz-divider>
    <div nz-row>
      <div nz-col nzSpan="8" nzOffset="2">
        <nz-form-item>
          <nz-form-label nzSpan="6" nzOffset="1">姓名 </nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="请输入名称" formControlName="name" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="8" nzOffset="2">
        <nz-form-item>
          <nz-form-label nzSpan="6" nzOffset="1