Angular react 形式 - 将 formArray 传递给子组件时出错

Question

我在其中嵌套了带有 formGroup 和 formArray 的响应式(Reactive)表单。
当我尝试将嵌套的 formArray 传递给子组件时，出现以下错误

FormArrayName must be used with a parent formGroup directive

下面是父窗体组

this.employeeForm= this.fb.group({
 employee: this.fb.group({
   name: [null],
   id: [null]
  }),
 address: this.fb.array({
   location: [null],
   city: [null]
 });
});

父表单组件

<form [formGroup]="employeeForm">
  <app-address [address]="employeeForm.controls.address"></app-address>
</form>

地址子组件html

<div [formArrayName]="address">
<div *ngFor="let item of address.controls;" [formGroupName]="i">
  <input type="text" formControlName="location">
</div>
</div>

地址子组件ts

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


@Component({
  selector: 'app-address',
  templateUrl: './address.component.html',
  styleUrls: ['./address.component.scss']
})
export class AddressComponent implements OnInit {

  constructor() { }
  @Input() address: FormArray;
  ngOnInit() {
  }

}

当我执行 console.log(this.employeeForm) 时，整体表单值工作正常
请检查并提出建议。感谢您的帮助。

Answer 1

代码看起来不错。问题在于您为子表单组使用自定义组件 app-address。

在嵌套组件内部时，Angular 表单不会自动注册。但是，您可以通过向子组件提供外部 FormGroup 来解决此问题。

您还应该将 formGroup 实例连同控件名称一起传递给您的自定义组件。然后在自定义组件的 formGroup 下创建一个表单控件。您的自定义组件将在您提供的同一 formGroup 下创建虚拟控件。

<app-address [address]="employeeForm.controls.identity" [formGroup]="yourFormGroup" [controlName]="controlName"></app-address>

在子组件中你可以初始化表单:

ngOnInit() {
   let control: FormControl = new FormControl('', Validators.required);
   this.formGroup.addControl(this.controlName, control);
}