Angular 8中Form Array无法保存输入值问题求助

你的代码核心问题是表单绑定逻辑错误，导致输入值无法关联到FormArray中的控件，具体原因和修复方式如下：

问题原因 #

1. FormArray不能直接绑定给form标签的[formGroup]：Angular的<form>标签要求绑定FormGroup实例，而你直接把FormArray赋值给了[formGroup]，这不符合Angular表单的绑定规则。
2. 循环中的FormGroup未关联索引：你遍历chavesNfeForm.controls时，没有通过[formGroupName]="i"将每个子FormGroup与FormArray的索引绑定，导致输入框无法找到对应的chave控件。

修复步骤 #

步骤1：修正表单结构（推荐用父FormGroup包裹FormArray） #

在组件类中，将FormArray放入一个父FormGroup中（这是Angular表单的标准写法，便于管理多个表单控件）：

// 整合原有nfReferenciadaForm与chavesNfe数组
this.nfReferenciadaForm = new FormGroup({
  referenciada: new FormControl(1),
  chavesNfe: new FormArray([
    new FormGroup({
      chave: new FormControl(""),
    })
  ])
});

// 新增快捷访问器，方便模板和组件中获取FormArray
get chavesNfeArray(): FormArray {
  return this.nfReferenciadaForm.get('chavesNfe') as FormArray;
}

步骤2：修正模板中的绑定逻辑 #

调整模板的表单绑定，正确关联FormArray和子FormGroup：

<form [formGroup]="nfReferenciadaForm" *ngIf="nfReferenciadaForm.value.referenciada === 1">
  <!-- 用formArrayName指定父FormGroup中的FormArray字段名 -->
  <div formArrayName="chavesNfe">
    <ng-container *ngFor="let chaveGroup of chavesNfeArray.controls; let i = index">
      <!-- 用[formGroupName]="i"绑定当前子FormGroup的索引 -->
      <div class="row" [formGroupName]="i">
        <div class="col-8">
          <mat-form-field>
            <mat-label><i class="fas fa-key"></i> Chave NF-e</mat-label>
            <!-- 现在formControlName可以正确关联到子FormGroup中的chave控件 -->
            <input matInput required formControlName="chave">
          </mat-form-field>
        </div>
      </div>
    </ng-container>
  </div>
</form>

步骤3：实现动态增减功能 #

添加新增和删除表单的方法，完善动态需求：

// 添加新的NF-e密钥表单组
addChave(): void {
  this.chavesNfeArray.push(
    new FormGroup({
      chave: new FormControl(""),
    })
  );
}

// 删除指定索引的表单组（保留至少一个表单）
removeChave(index: number): void {
  if (this.chavesNfeArray.length > 1) {
    this.chavesNfeArray.removeAt(index);
  }
}

在模板中添加操作按钮：

<form [formGroup]="nfReferenciadaForm" *ngIf="nfReferenciadaForm.value.referenciada === 1">
  <div formArrayName="chavesNfe">
    <ng-container *ngFor="let chaveGroup of chavesNfeArray.controls; let i = index">
      <div class="row" [formGroupName]="i">
        <div class="col-8">
          <mat-form-field>
            <mat-label><i class="fas fa-key"></i> Chave NF-e</mat-label>
            <input matInput required formControlName="chave">
          </mat-form-field>
        </div>
        <div class="col-2">
          <button 
            mat-button 
            color="warn" 
            (click)="removeChave(i)" 
            *ngIf="chavesNfeArray.length > 1"
          >
            删除
          </button>
        </div>
      </div>
    </ng-container>
  </div>
  <!-- 添加新表单的按钮 -->
  <button mat-button color="primary" (click)="addChave()">添加新的NF-e密钥</button>
</form>

验证表单值 #

现在你可以通过以下方式获取表单的所有值：

console.log(this.nfReferenciadaForm.value.chavesNfe);
// 输出示例：[{chave: 'xxx123'}, {chave: 'yyy456'}]

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