Question

我正在使用Angular Reactive Forms FormGroup和FormArray。我试图将我的表单字段拆分为子组件，但是我很难将父表单控件传递给孩子，我觉得应该很简单。我的父FormGroup是标题'binsForm'，我在我的模板中引用了子组件，如：

<app-child [parent]="binsForm"></app-child>

然后在子组件中我创建了一个@Input属性：

@Input() parent: FormGroup;

然后在子模板中引用该输入：

<div class="fields-wrap" [formGroup]="parent">
   <div class="input-wrap">
      <label>Bin ID <span>*</span><input type="text" formControlName="id"></label>
   </div>
  <div class="clearfix"></div>
</div>

在以下StackBlitz中，您可以点击“编辑质量”，然后您会在控制台中看到“无法找到名称为id的控件”的消息

我遵循了这个方法的教程，但无法弄清楚为什么子组件没有看到表单组。

Answer 1

我查看了你的代码，app-child正在等待自己的表单，你正在尝试注入不具有id，type，subtype等子属性的父表单。

因此，只需尝试注入来自FormArray（binsFormArray）的子表单，而不是注入父表单，如下所示：

<app-child [parent]="binsFormArray.at(i)"></app-child>

Answer 2

您需要在子组件上应用OnChanges以获取新的父表单。

导入OnChanges。

实施它export class ChildComponent implements OnInit, OnChanges {

ngOnChanges(changes) {
    console.log('changes', changes);
    this.parent = changes.parent;
}

Angular 4 FormGroup - 将父表单控件传递给子组件

2 个答案: