ERROR 错误：formArrayName 必须与父 formGroup 指令一起使用

Posted 2023-02-22

【中文标题】ERROR 错误：formArrayName 必须与父 formGroup 指令一起使用

【英文标题】：ERROR Error: formArrayName must be used with a parent formGroup directive

【发布时间】：2020-02-06 11:13:24

【问题描述】：

我正在为我的一个项目使用响应式数组。我正在尝试制作一个动态表单，在按钮单击时添加/删除字段。我的代码中出现以下错误

错误错误：formArrayName 必须与父 formGroup 指令一起使用。您需要添加一个 formGroup 指令并将其传递给现有的 FormGroup 实例

import  FormBuilder, FormArray, FormGroup  from '@angular/forms';


 public communicationForm: FormGroup;
  public items: FormArray;

  createItem(): FormGroup 
    return this.fb.group(
      communicationType: [''],
      communicationValue: ['']
    );
  

  addItem(): void 
    // this.items = this.communicationForm.get('items') as FormArray;
    this.items.push(this.createItem());
  

  constructor(private fb: FormBuilder)  

  ngOnInit() 
    this.communicationForm = this.fb.group(
      items: this.fb.array([this.createItem()])
    ),
    this.items = this.communicationForm.get('items') as FormArray;
  

<div class="col-md-6">
        <h3>Communications</h3>
        <div formArrayName="items" *ngFor="let item of communicationForm.get('items').controls; let i = index;">
            <div [formGroupName]="i">
                <select class="form-group col-md-5" (change)="changeCommunication($event)" formControlName="communicationType">
                    <option value="" disabled>Communications</option>
                    <option *ngFor="let communication of Communications" [ngValue]="communication.id">
                        communication.name
                    </option>
                </select>
            </div>
            <div [formGroupName]="i">
                <input type="text" class="col-md-6" formControlName="communicationValue">
            </div>
            <div [formGroupName]="i">
                <i class="fa fa-plus-circle" (click)="addItem()"></i>
            </div>
        </div>
    </div>

【参考方案1】：

添加一个父表单组：

<div class="col-md-6" [formGroup]="communicationForm">

我唯一要改变的就是为这些项目添加一个吸气剂：

TS

get items(): FormArray 
  return this.communicationForm.get('items') as FormArray;

而 ngOnInit 是：

ngOnInit() 
  this.communicationForm = this.fb.group(
    items: this.fb.array([this.createItem()])
  )

HTML

<div class="col-md-6">
        <h3>Communications</h3>
        <div formArrayName="items" *ngFor="let item of items.controls; let i = index;">
            <div [formGroupName]="i">
                <select class="form-group col-md-5" (change)="changeCommunication($event)" formControlName="communicationType">
                    <option value="" disabled>Communications</option>
                    <option *ngFor="let communication of Communications" [ngValue]="communication.id">
                        communication.name
                    </option>
                </select>
            </div>
            <div [formGroupName]="i">
                <input type="text" class="col-md-6" formControlName="communicationValue">
            </div>
            <div>
                <i class="fa fa-plus-circle" (click)="addItem()"></i>
            </div>
        </div>
    </div>

【讨论】：

不，您不能将 FormArray 包含在 FormGroup 中

嗯，是的，您可以，并且应该基于 OP 示例：)

::glups:: 抱歉，当我看到一个只有一个 formArray 的 formGroup 时，我有一个“tick”

【参考方案2】：

当我们使用的 formGroup 中没有关闭 FormArray 时

<form [formGroup]="items">
   <!--see that iterate over items.controls-->
   <!-- and create a formGroup= the variable -->
   <div *ngFor="let group of items.controls" [formGroup]="group">
      <input formControlName="communicationType">
      <input formControlName="communicationValue">
   </div>
</form>