title: Angular2: Bind form context to ngTemplateOutlet
body: <p>I'm trying to define a Component containing a dynamic Form (using ReactiveForms) where the user should be able to add / delete Controls. 
  The Controls can take many forms, and has to be defined outside of the Component, so I think that TemplateRef is the most appropriate for this.</p>
  
  <p>I'm struggling to find a way to bind the externally defined Control to the internal Form, through the use of formControlName</p>
  
  <p>Here is a start of the implementation:</p>
  
  <pre><code>// expandable.component.ts
  
  [...]
  @Component({
    selector: 'expandable',
    templateUrl: 'app/component/common/expandable/expandable.component.html',
    styleUrls: ['app/component/common/expandable/expandable.component.css']
  })
  export class ExpandableComponent {
    @ContentChild('childTemplate') childTemplate: TemplateRef&lt;any&gt;;
  
    @Input() children: Array&lt;any&gt;;
    public form: FormGroup;
  
    constructor(private _changeDetector: ChangeDetectorRef,
                private _formBuilder: FormBuilder) {
      this.children = [];
    }
  
    public ngOnInit(): void {
      this.form = this._formBuilder.group({
        children: this._formBuilder.array([])
      });
  
      const arrayControl = &lt;FormArray&gt;this.form.controls['children'];
      this.children.forEach(child =&gt; {
        const group = this.initChildForm();
        arrayControl.push(group);
      });
    }
  
    private initChildForm(): AbstractControl {
      return this._formBuilder.group({
        key: ['Initial Key', [Validators.required]],
        value: ['Initial Value', [Validators.required]]
      });
    }
  
    public addChild(): void {
      const control = &lt;FormArray&gt;this.form.controls['children'];
      control.push(this.initChildForm());
      this._changeDetector.detectChanges();
    }
  }
  </code></pre>
  
  <p>-</p>
  
  <pre><code>&lt;!-- expandable.component.html --&gt;
  
  &lt;form [formGroup]="form"&gt;
    &lt;div class="form-group"&gt;
      &lt;div formArrayName="children"&gt;
        &lt;div *ngFor="let child of form.controls.children.controls; let i=index"&gt;
          &lt;div [formGroupName]="i"&gt;
            &lt;template 
               [ngTemplateOutlet]="childTemplate" 
               [ngOutletContext]="{ $implicit: child }"&gt;&lt;/template&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;a (click)="addChild()"&gt;Add Child&lt;/a&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Attempt to define the the template externally:</p>
  
  <pre><code>  &lt;expandable&gt;
      &lt;template #childTemplate&gt;
        &lt;input class="form-control" 
          formControlName="value" /&gt;
        &lt;/template&gt;
    &lt;/expandable&gt;
  </code></pre>
  
  <p>I'm naively trying to bind the formControlName to the implicitly passed context from the outter , but with no luck, as I'm getting "Cannot find control with name: 'value'". Ideally, I would like to be able to do the formControlName binding into the <code>expandable.component.html</code> instead, but I see no way of doing this either. </p>
  
  <p>Any thoughts about this?</p>