コンポーネントを含むテンプレート駆動型

Question

ngFormにテンプレート駆動型コントロールを追加するにはどうすればよいですか？例えば

私は2つのコンポーネントでフォームを持っている：

@Component({ 
    selector: 'parent-form', 
    template: '<form #form="ngForm"> 
     <input required [(ngModel)]="model.foo" name="foo"> 
     <child-form [model]="model"></child-form> 
    </form>', 
    directives: [ REACTIVE_FORM_DIRECTIVES, ChildFormComponent ] 
}) 
export class ParentFormComponent { 
    public model: MyModel = new MyModel(); 
} 

@Component({ 
    selector: 'child-form', 
    template: '<fieldset> 
     <input required [(ngModel)]="model.bar" name="bar"> 
    </fieldset>', 
    directives: [ REACTIVE_FORM_DIRECTIVES ] 
}) 
export class ChildFormComponent { 
    @Input() public model: MyModel; 
} 

「親フォーム」で「フォーム」に「子フォーム」から「バー」コントロールを追加する方法は？

更新：同様の発見feature request。

Answer 1

修正プログラムとして、あなたは "RegisterFormModelDirective" を使用することができます：

import { Directive, ElementRef, Input, OnInit } from '@angular/core'; 
import { NgModel, NgForm } from '@angular/forms'; 

@Directive({ 
    selector: '[registerForm]' 
}) 
export class RegisterFormModelDirective implements OnInit { 
    private el: HTMLInputElement; 

    @Input('registerForm') public form: NgForm; 
    @Input('registerModel') public model: NgModel; 

    constructor(el: ElementRef) { 
     this.el = el.nativeElement; 
    } 

    ngOnInit() { 
     if (this.form && this.model) { 
      this.form.form.addControl(this.model.name, this.model.control); 
     } 
    } 
} 

そして、このディレクティブ：あなたは「例外を持っている場合https://plnkr.co/edit/GG2TVHHHGbAzoOP5mIRr?p=preview

：

<input [(ngModel)]="myValue" minlength="10" #myInput="ngModel" #myComp 
    name="childValue" [registerForm]="form" [registerModel]="myInput"> 

はplunkrデモを参照してください。Expressionが後に変更されました以前の値： 'false'現在の値： 'true' "、コード変更：

public ngOnInit() { 
    if (this.form && this.model) { 
     this.form.form.registerControl(this.model.name, this.model.control); 
     this.form.addControl(this.model); 
    } 
} 

Answer 2

アレクセイの答えの副題として、フォームコントロールからの入力を解除するためにOnDestroyハンドラを追加する必要があります。 * ngIfで入力を使用している場合は特に必要です。

public ngOnDestroy() { 
 
    if (this.form && this.model) { 
 
     this.form.removeControl(this.model); 
 
    } 
 
}