web-dev-qa-db-fra.com

Passer Angular Reactive FormControls aux composants enfants

J'ai un composant parent où je veux créer et stocker mon formulaire réactif. Il y aura plusieurs instances de groupe de formulaires dans un tableau de formulaires. Je souhaite transmettre les contrôles de formulaire de chaque groupe de formulaires à un composant enfant, mais j'ai du mal à comprendre comment procéder.

Voici un Stackblitz démontrant ce que je voudrais faire. De plus, certains champs ne s'appliqueront qu'à certaines "marques" de voitures, c'est pourquoi j'ai la ligne suivante dans mon html:

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

Je voudrais déplacer les champs du groupe de formulaires "Détails" dans le composant enfant "détails-champs", mais lorsque j'essaie de le faire, cela me dit que je n'ai pas d'instance de groupe de formulaires, donc je sais que le groupe de formulaires parent est ne pas s'inscrire dans le composant enfant. Toute aide est très appréciée.

angularcomponentsangular-componentsangular-reactive-formsangular-forms
7
JordanBarber

Ce n'est pas trop difficile, une fois que vous savez quoi chercher. Si vous ne l'avez jamais fait auparavant, cela peut être un défi. Les messages d'erreur que vous obtenez n'aident pas toujours.

Tout d'abord, vous souhaitez ajouter des éléments à votre composant DetailsFields. Le nouveau Inputs vous permettra de passer l'instance du groupe de formulaires que vous avez construit dans votre composant parent. Les entrées car et carIndex seront utilisées pour transmettre les valeurs dont le composant enfant aura besoin pour fonctionner comme vous les avez maintenant.

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

Deuxièmement, vous souhaitez déplacer une partie du modèle HTML que vous avez dans votre composant parent vers le composant enfant. Le modèle de composant enfant (details-fields.component.html) ressemblera finalement à ceci. Le [formGroup]="form" dans le premier div est la vraie clé ici. C'est ce qui indique au modèle enfant quel groupe de formulaires utiliser. Vous passez ceci du parent dans le code après cela.

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

Le modèle de composant parent ne restera qu'avec cela. C'est là que vous passez le groupe de formulaires carsForm au composant enfant, ainsi que car et 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>

La dernière chose que j'ai faite a été de déplacer les styles que vous aviez dans le composant parent vers le fichier styles.css, afin que tous les composants puissent les utiliser.

C'est ça! Vraiment, il suffit de déplacer du code et d'ajouter des entrées pour que vous puissiez transmettre à l'enfant ce dont il a besoin.

9
R. Richards