Angular新手遇FormArray赋值报错：表单增删文本框实现受阻

嘿，我来帮你搞定这个Angular表单的问题！你遇到的Cannot assign FormArray报错，大概率是因为没有正确初始化FormArray并关联到FormGroup，还有一个小问题是你直接声明了formBuilder: FormBuilder但没注入它，这也会导致后续调用出错。

咱们一步步来修正代码：

1. 修正组件代码（component.ts） #

首先要在构造函数里注入FormBuilder，然后正确初始化包含FormArray的表单结构：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  nameForm: FormGroup;

  // 关键：在构造函数中注入FormBuilder，而不是仅声明变量
  constructor(private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    // 初始化表单，核心是把FormArray作为控件加入FormGroup
    this.nameForm = this.formBuilder.group({
      items: this.formBuilder.array([]) // 用formBuilder.array创建动态表单数组
    });
    // 可以默认添加一个初始输入项
    this.addItem();
  }

  // 封装获取FormArray的快捷方法，方便模板调用
  get items(): FormArray {
    return this.nameForm.get('items') as FormArray;
  }

  // 创建单个输入项的表单组
  createItem(): FormGroup {
    return this.formBuilder.group({
      name: '',
      manufacture_date: ''
    });
  }

  // 添加新的输入项
  addItem(): void {
    this.items.push(this.createItem());
  }

  // 移除指定索引的输入项
  removeItem(index: number): void {
    this.items.removeAt(index);
  }
}

2. 模板中绑定动态表单（component.html） #

在模板里遍历FormArray的控件，实现添加/移除的交互：

<form [formGroup]="nameForm">
  <!-- 遍历FormArray中的每一项 -->
  <div formArrayName="items" *ngFor="let item of items.controls; let i = index">
    <div [formGroupName]="i">
      <input formControlName="name" placeholder="请输入名称">
      <input formControlName="manufacture_date" placeholder="请输入生产日期">
      <button type="button" (click)="removeItem(i)">移除</button>
    </div>
  </div>
  <button type="button" (click)="addItem()">添加新项</button>
</form>

你原代码的问题根源 #

• FormBuilder未注入：直接声明formBuilder: FormBuilder但没在构造函数注入，会导致this.formBuilder为undefined，调用方法时触发隐性错误
• FormArray未正确关联：你原代码里没有把FormArray作为控件加入到FormGroup中，而是可能直接给FormGroup的属性赋值了FormArray，导致类型不匹配，触发Cannot assign FormArray报错

这样修改后，动态添加/移除文本框的功能就能正常运行啦！

内容的提问来源于stack exchange，提问作者mdguit