子コンポーネントから作成する角度追加コントロール

Question

角度2では、入力を含む子コンポーネントがあります。この入力（コントロール）を親コンポーネントフォーム（NgForm）に追加したいと思います。

私は現在、簡単のためテンプレート駆動型を使用しています。

私はこの答えを見ましたが、それはおそらく時代遅れだと思う？： Angular 2 Add control to parent component's form

子コンポーネントテンプレートを： formInputName私はこのコンポーネントを再利用し、動的に「名前」プロパティを追加できるように結合入力されています。親コンポーネントで

<input class="text-input" [name]="formInputName" [id]="formInputName" type="text" [(ngModel)]="searchValue" 
      (change)="onChange(searchValue)" 
      (blur)="onBlur()" 
      (focus)="onFocus()" 
      [required]="isRequired"> 

私は、フォームのインスタンスを持っている：

@ViewChild('testForm') testForm: NgForm; 

は、どのように私はNgFormのこのインスタンスに子コンポーネントコントロールを追加することができますか？私はaddControlでそれを行う方法がわかりません。テンプレートに何を追加する必要があるのか​​、コントローラーでプログラムでそれを行う方法がわからない

Plunker：https://plnkr.co/edit/rDluyJduyHF7vclK9wRE?p=preview

Answer 1

あなたはこれを試して、それが機能しているかどうかを確認もらえ、

子コンポーネント

@Output() childControl = new EventEmitter<NgModel>(); // import { NgModel } from '@angular/forms'; 
@ViewChild('myControl') myControl: NgModel; 

ngAfterViewInit() { 
this.childControl.emit(myControl); // emitting the control to the parent to be picked up there and added to the main form 
} 

子テンプレート

<input #myControl="ngModel" class="text-input" [name]="formInputName" [id]="formInputName" type="text" [(ngModel)]="searchValue" 
      (change)="onChange(searchValue)" 
      (blur)="onBlur()" 
      (focus)="onFocus()" 
      [required]="isRequired"> 

親テンプレート

<child-component (childControl)="childControlReady($event)"></child-component> 

親コンポーネント

childControlReady(control: NgModel) { 
this.testform.addControl(control); 
}