title: Angular 4 Dynamic form with nested groups
body: <p>I want to generate a reactive form from the tree structure.</p>
  
  <p>Here is the code that creates the form items (form groups and controls). For the controls nested in form group it I use a recursive template.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { Component, Input, NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
  
  @Component({
    selector: 'form-item',
    template: `
      &lt;ng-container [formGroup]="form"&gt;
        &lt;ng-container *ngTemplateOutlet="formItemTemplate; context:{ $implicit: pathSegments }"&gt;&lt;/ng-container&gt;
  
        &lt;ng-template #formItemTemplate let-pathSegments&gt;
          
          &lt;ng-container *ngIf="pathSegments.length &gt; 1"&gt;
            &lt;div [formGroupName]="pathSegments[0]" class="form-group"&gt;
              &lt;ng-container *ngTemplateOutlet="formItemTemplate; context:{ $implicit: pathSegments.slice(1) }"&gt;&lt;/ng-container&gt;
            &lt;/div&gt;
          &lt;/ng-container&gt;
  
          &lt;ng-container *ngIf="pathSegments.length === 1"&gt;
            &lt;div class="form-control"&gt;
              &lt;label&gt;{{pathSegments[pathSegments.length - 1]}}&lt;/label&gt;
              &lt;!--&lt;input type="text" [formControlName]="pathSegments[pathSegments.length - 1]"/&gt;--&gt;
              &lt;input type="text"/&gt;
            &lt;/div&gt;
          &lt;/ng-container&gt;
          
        &lt;/ng-template&gt;
      &lt;/ng-container&gt;
    `,
  })
  export class AppControlComponent {
  
    @Input() form: FormGroup;
  
    @Input()
    set path(path: string) {
      this.pathSegments = path.split('.');
    }
    pathSegments: string[] = [];
  
    constructor() { }
  }
  
  
  @Component({
    selector: 'app-root',
    template: `
      &lt;form [formGroup]="questionForm"&gt;
        &lt;h1&gt;Question Form&lt;/h1&gt;
  
        &lt;form-item [form]="questionForm" path="question"&gt;&lt;/form-item&gt;
        &lt;form-item [form]="questionForm" path="answers.answer1"&gt;&lt;/form-item&gt;
        &lt;form-item [form]="questionForm" path="answers.answer2"&gt;&lt;/form-item&gt;
        &lt;form-item [form]="questionForm" path="answers.answer3"&gt;&lt;/form-item&gt;
  
        &lt;button type="submit"&gt;submit&lt;/button&gt;
  
        &lt;pre&gt;{{questionForm.value | json}}&lt;/pre&gt;
      &lt;/form&gt;
    `,
  })
  export class AppComponent {
    private questionForm: FormGroup;
  
    constructor(private fb: FormBuilder) {
      this.questionForm = this.fb.group({
        question: ['', Validators.required],
        answers: this.fb.group({
          answer1: ['', Validators.required],
          answer2: ['', Validators.required],
          answer3: ['', Validators.required],
        }),
      });
    }
  }
  
  @NgModule({
    imports: [BrowserModule, FormsModule, ReactiveFormsModule],
    declarations: [
      AppComponent,
      AppControlComponent
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule {}</code></pre>
  </div>
  </div>
  </p>
  
  <p>The form HTML is generated perfectly. But when I add the <code>formControlName</code> directive to the input the HTML generation breaks. Then I get such error:</p>
  
  
  
  <pre><code>Error: Cannot find control with name: 'answer1'
  </code></pre>