[英]Reactive forms: Angular formarrays and formcontrols
[英]Pass Angular Reactive FormControls to Children Components
我有一个父组件,我想创建和存储我的Reactive Form。 表单数组中将有多个表单组实例。 我想将表单控件从每个表单组传递给子组件,但我很难弄清楚如何执行此操作。
这是Stackblitz展示我想做的事情。 此外,某些字段仅适用于某些“品牌”汽车,这就是为什么我的html中有以下行:
<input type="text" *ngIf="car.make != 'ford'" formControlName="model">
我想将“详细信息”表单组字段移动到“详细信息字段”子组件中,但是当我尝试这样做时,它告诉我我没有表单组实例,因此我知道父表单组是没有在子组件中注册。 任何帮助深表感谢。
一旦你知道要寻找什么,它就不会太难。 如果你以前从未做过,那可能是一个挑战。 您获得的错误消息并不总是有用。
首先,您要向DetailsFields
组件添加一些内容。 新的Input
s将允许您传入您在父组件中构造的表单组的实例。 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
一起传递给子组件的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文件中,这样所有组件都可以使用它们。
而已! 真的只是移动一些代码并添加一些输入,这样你就可以传递孩子所需要的东西。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.