Angular响应式表单：如何为字符串数组渲染FormArray控件

问题分析 #

你的代码存在3个关键错误：

• ngFor语法错误：Angular中遍历集合需用of而非in
• formControlName绑定错误：直接写emailIndex会被识别为字符串，需绑定变量emailIndex
• 缺少表单初始化逻辑：未将后端返回的emails数据填充到FormArray中

完整解决方案 #

1. 组件类代码

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-email-form',
  templateUrl: './email-form.component.html',
  styleUrls: ['./email-form.component.css']
})
export class EmailFormComponent implements OnInit {
  myform!: FormGroup;
  // 模拟后端返回的数据源
  data = {
    "streetName": "street 1",
    "emails" : [
      "aaa@stackoverflow.com",
      "yyy@stackoverflow.com"
    ]
  };

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    // 初始化响应式表单结构
    this.myform = this.fb.group({
      streetName: [this.data.streetName],
      emails: this.fb.array([])
    });

    // 将emails数据填充到FormArray
    this.populateEmails();
  }

  // 获取emails表单数组的快捷访问器
  get emailsFormArray(): FormArray {
    return this.myform.get('emails') as FormArray;
  }

  // 批量添加邮箱控件到FormArray
  populateEmails(): void {
    this.data.emails.forEach(email => {
      this.emailsFormArray.push(this.fb.control(email));
    });
  }
}

2. 模板代码

<form [formGroup]="myform">
  <!-- 街道名称输入框 -->
  <div class="row mt-2">
    <div class="col">
      <input type="text" formControlName="streetName" placeholder="街道名称">
    </div>
  </div>

  <!-- 邮箱数组输入框 -->
  <div class="row mt-4" formArrayName="emails">
    <div class="col" *ngFor="let emailCtrl of emailsFormArray.controls; let emailIndex=index">
      <input type="text" placeholder="邮箱地址" [formControlName]="emailIndex"/>
    </div>
  </div>
</form>

关键说明 #

• 通过emailsFormArray访问器简化FormArray的获取，提升代码可读性与类型安全性
• 用[formControlName]="emailIndex"进行属性绑定，确保每个输入框对应FormArray中指定索引的控件
• 必须在组件初始化阶段将后端数据逐个添加到FormArray，完成表单与数据的关联

内容的提问来源于stack exchange，提问作者Dickens A S