gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 17:24:57 24 4
gpt4 key购买 nike

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

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

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

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

最佳答案

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

首先,您要向 DetailsFields 组件添加一些内容。新的 Input 将允许您传入您在父组件中构建的表单组的实例。 carcarIndex 输入将用于传递子组件需要的值,以便像您现在拥有的那样工作。

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 表单组与 carcarIndex 一起传递给子组件的地方。

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

就是这样!实际上只是四处移动一些代码并添加一些输入,这样您就可以向 child 传递它需要的东西。

关于angular - 将 Angular 响应式 FormControl 传递给子组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50883272/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com