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

Question

Angular 2 を使用して、管理を容易にするために 1 つの親コンポーネントと 2 つの子コンポーネントに分割した長くて複雑なフォームがあります。検証のためにフォームのステータスを追跡する必要があるまで、このプロセスはうまく機能します。バインドされたモデルに関するデータは @Input を介して簡単に送信できますが、フォーム自体に関するデータを送信する方法がわかりません。

擬似コードを使用した例を次に示します。

@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;
}

フォームの下部に、JSON パイプを使用してフォームの値を表示しています。f.value「詳細」および「高度な」入力に関するデータを表示する必要があります。親コンポーネントがフォームのステータスを追跡できるように、親コンポーネントと子コンポーネントの間で情報を渡すにはどうすればよいですか? 理想的には、これはテンプレート駆動型とリアクティブ型の両方で機能します。