web-dev-qa-db-ja.com

Pass Angular Reactive FormControls to Childrenコンポーネント

Reactive Formを作成して保存する親コンポーネントがあります。フォーム配列には複数のフォームグループインスタンスがあります。各フォームグループから子コンポーネントにフォームコントロールを渡したいのですが、これを行う方法がわかりません。

Stackblitz は、私がやりたいことを示しています。また、一部のフィールドは特定の車の「メーカー」にのみ適用されるため、htmlに次の行が含まれています。

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

「Details」フォームグループフィールドを「details-fields」子コンポーネントに移動したいのですが、そうしようとすると、フォームグループインスタンスがないため、親フォームグループが子コンポーネントに登録されていません。どんな助けも大歓迎です。

angularcomponentsangular-componentsangular-reactive-formsangular-forms
7
JordanBarber

何を探すべきかがわかれば、それほど難しくありません。以前にそれをやったことがない場合、それは挑戦になる可能性があります。表示されるエラーメッセージが常に役立つとは限りません。

まず、DetailsFieldsコンポーネントにいくつかのものを追加します。新しいInputsを使用すると、親コンポーネントで構築したフォームグループのインスタンスを渡すことができます。 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）は、最終的にはこのようになります。 [formGroup]="form"最初のdivが実際のキーです。これは、使用するフォームグループを子テンプレートに指示するものです。この後のコードで親からこれを渡します。

<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ファイルに移動して、すべてのコンポーネントがそれらを使用できるようにすることでした。

それでおしまい！本当にいくつかのコードを移動し、いくつかの入力を追加するだけで、必要なものを子に渡すことができます。

9
R. Richards