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

Question

我有一个父组件，我想在其中创建和存储我的响应式表单。一个 Form Array 中会有多个 Form Group 实例。我想将每个表单组中的表单控件传递给子组件，但我不知道如何执行此操作。

这里有一个 Stackblitz 演示我想做什么。此外，某些字段仅适用于某些 'makes' 汽车，这就是为什么我的 html 中有以下行：

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

我想将 'Details' Form Group 字段移动到 'details-fields' 子组件中，但是当我尝试这样做时，它告诉我我没有 Form Group 实例，所以我知道父 Form Group 没有在子组件中注册。非常感谢任何帮助。

Answer 1

这并不难，只要您知道要寻找什么。如果您以前从未做过，这可能是一个挑战。您收到的错误消息并不总是有帮助。

首先，您想向 DetailsFields 组件添加一些东西。新的 Inputs 将允许您传入您在 parent 组件中构建的表单组的实例。 car 和 carIndex 输入将用于传递 child 组件需要的值，以便像现在这样工作。

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() { }
}

其次，您想将 parent 组件中的一些模板 HTML 移动到 child 组件。 child 组件模板 (details-fields.component.html) 最终将如下所示。第一个 div 中的 [formGroup]="form" 才是真正的关键。这就是告诉 child 模板要使用的表单组。您在这之后的代码中从 parent 传递它。

<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>

parent组件模板就只剩下这个了。这是将 carsForm 表单组与 car 和 carIndex.

一起传递给 child 组件的地方

<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>

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

就是这样！真的只是移动一些代码并添加一些输入，这样你就可以传递 child 它需要的东西。

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

Pass Angular Reactive FormControls to Children Components

angular

components

angular-components

angular-reactive-forms

angular-forms