angular 6.x响应式模板遍历formGroup中的formArray

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

Fern_blog

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

阅读量5.1k

点赞数

分类专栏：开发笔记 Angular6.x 文章标签： angualr6.x 响应式表单 formgroup formArray 取值

本文链接：https://blog.csdn.net/sinat_33248260/article/details/83016514

版权

本文介绍了在Angular 6.x中遇到使用响应式表单时，通过formGroup遍历formArray无法正常显示input标签的问题。作者探讨了可能的原因，并分享了解决此问题的方法，即通过在TypeScript属性中直接获取emails来实现formArray的正确显示。

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

FormArray 说明：

FormArray 用于代表可以增长的数据集合,没有对应的key 只是下标，一般与*ngFor一起使用。

在ts文件中定义一个formGroup

  formModule: FormGroup = new FormGroup({
    dateRange: new FormGroup({
      fromDate: new FormControl(),
      toDate: new FormControl()
    }),
    emails: new FormArray([
      new FormControl('aaaaa@a.com'),
      new FormControl('bbbbbb@b.com')
    ])
  });

在dom文件中使用*ngFor 遍历获取emails

<form [formGroup]="formModule" (submit)="onSubmit()">
  <div formGroupName="dateRange">
    起始日期<input type="date" formControlName="fromDate">
    截止日期<input type="date" formControlName="toDate">
  </div>
  <div>
    <ul formArrayName="emails">
      <li *ngFor=" let e of this.fo