Q：ng-contentでAngular 2テンプレートフォームを使用するにはどうすればよいですか？

Question

ng-content内に入力入力要素を作成し、それを親コンポーネントのngFormインスタンスに「接続」させることはできませんか？

親コンポーネントのために、この基本的なテンプレートください：

<input type="text" [(ngModel)]="user.firstName" #firstName="ngModel" name="firstName" required minlength="2"> 

での提出：このような何か、「NG-コンテンツ」内の置かれた子コンポーネント、内部で次に

<form (ngSubmit)="onSubmit(editForm)" #editForm="ngForm" novalidate>    
<ng-content></ng-content> 
<button type="submit">Submit</button> 
</form> 

を親フォーム、子コントロールは使用できません。これは、子コンポーネントにあるもののダーティー/検証が親フォームに反映されないことを意味します。

ここには何が欠けていますか？

Answer 1

この時点で別の解決策が考え出された可能性はありますが、これを行う方法を考え出しただけです。うまくいけばそれはあなたや他の誰かを助けるでしょう。

import { NgModel } from '@angular/forms'; 
import { Component, ContentChildren, ViewChild, QueryList, AfterViewInit } from '@angular/core'; 

@Component({ 
    selector: 'my-custom-form', 
    template: ` 
    <form (ngSubmit)="onSubmit(editForm)" #editForm="ngForm" novalidate>    
     <ng-content></ng-content> 
     <button type="submit">Submit</button> 
    </form> 
    `, 
}) 
export class MyCustomFormComponent implements AfterViewInit { 
    @ContentChildren(NgModel) public models: QueryList<NgModel>; 
    @ViewChild(NgForm) public form: NgForm; 

    public ngAfterViewInit(): void { 
    let ngContentModels = this.models.toArray(); 
    ngContentModels.forEach((model) => { 
     this.form.addControl(model); 
    }); 
    } 

    public onSubmit(editForm: any): void { 
    console.log(editForm); 
    } 
} 

その後は、このようなあなたのテンプレートでそれを使用することができます。

<my-custom-form> 
    <input name="projectedInput" ngModel> 
</my-custom-form> 

フォームを送信すると、あなたはprojectedInputフォームコントロールがNgFormに追加されていることがわかります。

注：私はAfterViewInitライフサイクルフックから投影された入力を追加しようとしました。それは早く動くかもしれませんが、わかりません。私が気づいていない、これを行うことにいくつかの問題があるかもしれません。 YMMV。