时间戳

首页 > 解决方案 > 角度反应形式 - 将 formArray 传递给子组件时出错

angular - 角度反应形式 - 将 formArray 传递给子组件时出错

问题描述

我在其中嵌套了带有 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)
请检查并提出建议时，整体表单值工作正常。谢谢你的帮助。

标签： angularangular-reactive-formsangular-forms

解决方案

代码看起来不错。问题在于您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);
}

推荐阅读