Angular reactive form-将formArray传递给子组件时出错

Question

我已经嵌套了带有formGroup和formArray的反应式表单。
当我试图将嵌套的formArray传递给子组件时，我得到了以下错误，即

FormArrayName必须与父formGroup指令一起使用

下面是父窗体组

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用于子窗体组的位置。

在嵌套组件内部时，角度形状不会自动注册。但是，您可以通过向子组件提供外部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);
}