親と子のコンポーネント間でフォームステータスデータを渡す

Question

角度2を使用すると、管理が容易になるように1つの親コンポーネントと2つの子コンポーネントに分割されています。このプロセスは、検証のためにフォームの状態を把握する必要があるまでうまく機能します。バインドされたモデルに関するデータは@Input経由で簡単に送信できますが、フォーム自体に関するデータの送信方法を理解することはできません。私はJSONのパイプを使用してフォーム値を表示していフォームの下部に

@Component({ 
    template: ` 
     <form #f="ngForm"> 
      <basic-details [exampleModel]="exampleModel"></basic-details> 
      <advanced-details [exampleModel]="exampleModel"></advanced-details> 
      <p>Form data: {{f.value | json}}</p> 
     </form> 
    ` 
}) 
export class ParentFormComponent { 
    public exampleModel: ExampleModel = new ExampleModel(); 
} 

@Component({ 
    selector: 'basic-details', 
    template: ` 
     <input type="text" name="details" [(ngModel)]="exampleModel.details"> 
    ` 
}) 
export class BasicDetailsComponent { 
    @Input() exampleModel: ExampleModel; 
} 

@Component({ 
    selector: 'advanced-details', 
    template: ` 
     <input type="text" name="advanced" [(ngModel)]="exampleModel.advanced"> 
    ` 
}) 
export class AdvancedDetailsComponent { 
    @Input() exampleModel: ExampleModel; 
} 

：ここ

は擬似コードを使用した例です。 f.valueは、「詳細」および「高度な」入力に関するデータを表示する必要があります。親がフォームのステータスを追跡できるように、親コンポーネントと子コンポーネントの間で情報を渡すにはどうすればよいですか？理想的には、テンプレート駆動型と反応型の両方で動作します。

Answer 1

Johnが述べたように、親コンポーネントと子コンポーネントが共有するサービスを作成することは良い解決策です。すべてのフォームが有効かどうかを確認できるFormArrayを使用できます。サービスの

例：あなたは

import { Injectable } from '@angular/core'; 
import { FormArray, FormGroup } from '@angular/forms'; 

@Injectable() 
export class FormService { 
    private formArray: FormArray = new FormArray([]); 

    addForm(formGroup: FormGroup) { 
    this.formArray.push(formGroup); 
    } 

    allValid(): boolean { 
    return this.formArray.valid; 
    } 

    anyDirty(): boolean { 
    return this.formArray.dirty; 
    } 
} 

あなたはそれがあるように、サービスを提供したいparentComponentには、親と子の間で共有されます。あなたのコンポーネントで

@Component({ 
    ... 
    providers: [FormService] 
}) 

あなたのフォームが構築された後this.formservice.addForm(this.form);を起動する必要があります。