将Angular反应式FormControl传递给子组件

Question

我有一个父组件，我想在其中创建和存储我的反应式表单。表单数组中将有多个表单组实例。我想将表单控件从每个表单组传递给子组件，但是在弄清楚如何做到这一点时遇到了麻烦。

这是一个Stackblitz，演示了我想做的事。另外，某些字段仅适用于汽车的某些“品牌”，这就是为什么我的html中包含以下行：

<input type="text" *ngIf="car.make != 'ford'" formControlName="model">

我想将“详细信息”表单组字段移到“详细信息字段”子组件中，但是当我尝试这样做时，它告诉我我没有表单组实例，所以我知道父表单组是未在子组件中注册。任何帮助深表感谢。

Answer 1

一旦知道要查找的内容，它就不会太难。如果您以前从未做过，那将是一个挑战。您收到的错误消息并不总是有帮助。

首先，您要向DetailsFields组件中添加一些内容。new Input允许您传入在父组件中构造的表单组的实例。该car和carIndex输入将被用来传递中的值的子组件需要为了工作，就像你现在有他们。

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
    selector: 'app-child',
    templateUrl: './details-fields.component.html',
    styleUrls: ['./details-fields.component.css']
})

export class DetailsFields implements OnInit {
    @Input() form: FormGroup;
    @Input() car: any;
    @Input() carIndex: number;

    ngOnInit() { }
}

其次，您想将父组件中的某些模板HTML移到子组件。最后，子组件模板（details-fields.component.html）将看起来像这样。第[formGroup]="form"一个div是此处的真实键。这就是告诉子模板要使用哪个表单组的原因。在此之后，您可以从父代码中传递此代码。

<div [formGroup]="form">
    <div class="car-wrap" formArrayName="cars">
        <div [ngClass]="car.make + '-car'" [formGroupName]="carIndex">
            <p class="title">This car is a {{car.make}}</p>
            <div formGroupName="details">
              <input type="text" formControlName="make">
              <input type="text" *ngIf="car.make != 'ford'" formControlName="model">
              <input type="number" formControlName="year">
            </div>
            <div formGroupName="appearance">
              <input type="text" formControlName="color">
            </div>
        </div>
    </div>
</div>

父组件模板将只剩下这个。在这里，您将carsForm表单组以及car和一起传递给子组件carIndex。

<div id="cars" [formGroup]="carsForm">
    <div *ngFor="let car of cars; let i = index;">
        <app-child [form]="carsForm" [car]="car" [carIndex]="i"></app-child>
    </div>
</div>

我做的最后一件事是将父组件中具有的样式移到styles.css文件中，以便所有组件都可以使用它们。

而已！实际上，只是移动一些代码并添加一些输入，以便您可以将孩子的需要传递给孩子。