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);
}

Angular反应形式-将formArray传递给子组件时出现错误

1 个答案: