将 Angular Reactive FormControls 传递给子组件 [英] Pass Angular Reactive FormControls to Children Components

查看：22
本文介绍了将 Angular Reactive FormControls 传递给子组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

这是一个 Stackblitz 演示了我想要做什么.此外，某些字段仅适用于某些品牌"的汽车，这就是为什么我的 html 中有以下行:

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

解决方案

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

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

import { Component, OnInit, Input } from '@angular/core';从@angular/forms"导入{FormGroup}；@成分({选择器:'app-child'，templateUrl: './details-fields.component.html',styleUrls: ['./details-fields.component.css']})导出类 DetailsFields 实现 OnInit {@Input() 表单:FormGroup；@Input() 汽车:任何；@Input() carIndex: 数字；ngOnInit() { }}

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

<div class="car-wrap" formArrayName="cars"><div [ngClass]="car.make + '-car'" [formGroupName]="carIndex"><p class="title">这辆车是{{car.make}}</p><div formGroupName="详细信息"><input type="text" formControlName="make"><input type="text" *ngIf="car.make != 'ford'" formControlName="model"><input type="number" formControlName="year">
<div formGroupName="外观"><input type="text" formControlName="color">

父组件模板将只剩下这个.这是您将 carsForm 表单组连同 car 和 carIndex 一起传递给子组件的地方.

<div *ngFor="let car of cars; let i = index;"><app-child [form]="carsForm" [car]="car" [carIndex]="i"></app-child>

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

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

I have a parent component where I want to create and store my Reactive Form. There will be multiple Form Group instances in a Form Array. I want to pass the Form Controls from each Form Group to a Child Component but am having trouble figuring out how to do this.

Here's a Stackblitz demonstrating what I would like to do. Also, some fields will only apply to certain 'makes' of cars which is why i have the following line in my html:

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

I would like to move the 'Details' Form Group fields into the 'details-fields' child component but when I try to do that, it tells me that I don't have a Form Group instance so I know the parent Form Group is not registering in the child component. Any help is much appreciated.

解决方案

It's not too tough, once you know what to look for. If you have never done it before, it can be a challenge. The error messages you get don't always help.

First, you want to add some things to your DetailsFields component. The new Inputs will allow you to pass in the instance of the form group you constructed in your parent component. The car and carIndex inputs will be used to pass in the values the child component will need in order to work like you have them now.

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

Second, you want to move some of the template HTML you have in you parent component to the child component. The child component template (details-fields.component.html) will look like this in the end. The [formGroup]="form" in the first div is the real key here. That is what tells the child template what form group to use. You pass this from the parent in the code after this.

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

The parent component template will be only left with this. This is where you pass the carsForm form group to the child component, along with the car and the 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>

The last thing I did was move the styles you had in the parent component out to the styles.css file, so all components could use them.

That's it! Really just moving some code around and adding some inputs so you can pass the child what it needs.

这篇关于将 Angular Reactive FormControls 传递给子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆