将Angular Reactive FormControls传递给Children Components-Java 学习之路

我有一个父组件，我想创建和存储我的Reactive Form . 表单数组中将有多个表单组实例 . 我想将表单控件从每个表单组传递给子组件，但我很难弄清楚如何执行此操作 .

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

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

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

1 回答

一旦你知道要寻找什么，它就不会太难 . 如果你以前从未做过，那可能是一个挑战 . 您获得的错误消息并不总是有用 .

首先，您要为 DetailsFields 组件添加一些内容 . 新的 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）最终将如下所示 . 第一个 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文件中，这样所有组件都可以使用它们 .

而已！真的只是移动一些代码并添加一些输入，这样你就可以传递孩子所需要的东西 .

回复于 2024-04-25T11:39:41+08:00

将Angular Reactive FormControls传递给Children Components

1 回答

相关问题