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

【问题标题】：Angular 4 FormGroup - Pass parent form controls to child componentAngular 4 FormGroup - 将父表单控件传递给子组件
【发布时间】：2018-08-11 05:02:43
【问题描述】：

我正在使用 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 的控件”

我按照此方法的教程进行操作，但无法弄清楚子组件为什么看不到表单组。

【问题讨论】：

标签： javascript angular typescript angular-components angular-reactive-forms

【解决方案1】：

我查看了您的代码，app-child 正在等待自己的表单，而您正在尝试注入没有子属性（如 id、类型、子类型等）的父表单。

因此，不要注入父表单，而是尝试注入来自您的 FormArray (binsFormArray) 的子表单，如下所示：

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

【讨论】：

【解决方案2】：

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

导入 OnChanges。

实现它export class ChildComponent implements OnInit, OnChanges {

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

【讨论】：