将 Angular Reactive FormControls 传递给子组件

Posted 2023-02-23

【中文标题】将 Angular Reactive FormControls 传递给子组件

【英文标题】：Pass Angular Reactive FormControls to Children Components

【发布时间】：2018-11-25 18:04:55

【问题描述】：

我有一个父组件，我想在其中创建和存储我的响应式表单。一个表单数组中会有多个表单组实例。我想将每个表单组中的表单控件传递给子组件，但我无法弄清楚如何执行此操作。

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

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

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

【问题讨论】：

请参考this link，它可能会对您有所帮助。

【参考方案1】：

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

首先，您想在DetailsFields 组件中添加一些内容。新的Inputs 将允许您传入您在父组件中构建的表单组的实例。 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) 最终将如下所示。第一个div 中的[formGroup]="form" 是这里真正的关键。这就是告诉子模板使用哪个表单组的原因。你在这之后的代码中从父级传递这个。

<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 文件中，以便所有组件都可以使用它们。

就是这样！实际上只是移动一些代码并添加一些输入，这样您就可以将孩子需要的东西传递给它。

【讨论】：

感谢@R.，您的示例对我有帮助的具体部分是父级将一个指向元素的单数指针传递给子级，而不是整个值数组。例如汽车，而不是汽车。

我有类似的情况，除了我根据从父组件提交的表单在子组件中显示搜索结果，知道该怎么做吗？

@R.理查兹虽然这个解决方案是有效的，但如果我确实想将 formGroup 保留在父级中怎么办？它应该可以工作，因为模板驱动的表单是允许的，当然它应该始终由父级决定是否要在新组或现有组中重用某些东西。

现在是真正的问题@R。理查兹可以为动态生成的许多字段递归地完成此操作。因此，如果我从一个 json 结构中获取。服务器并生成一个深度嵌套的组，如 json 指示的那样，我可以递归地继续将该父表单组传递给每个孩子。

这个解决方案有堆栈闪电战吗？我尝试了相同的方法，但它对我不起作用