Angular 4 Dynamic form with nested groups

Question

I want to generate a reactive form from the tree structure.

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.

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: `
    <ng-container [formGroup]="form">
      <ng-container *ngTemplateOutlet="formItemTemplate; context:{ $implicit: pathSegments }"></ng-container>

      <ng-template #formItemTemplate let-pathSegments>
        
        <ng-container *ngIf="pathSegments.length > 1">
          <div [formGroupName]="pathSegments[0]" class="form-group">
            <ng-container *ngTemplateOutlet="formItemTemplate; context:{ $implicit: pathSegments.slice(1) }"></ng-container>
          </div>
        </ng-container>

        <ng-container *ngIf="pathSegments.length === 1">
          <div class="form-control">
            <label>{{pathSegments[pathSegments.length - 1]}}</label>
            <!--<input type="text" [formControlName]="pathSegments[pathSegments.length - 1]"/>-->
            <input type="text"/>
          </div>
        </ng-container>
        
      </ng-template>
    </ng-container>
  `,
})
export class AppControlComponent {

  @Input() form: FormGroup;

  @Input()
  set path(path: string) {
    this.pathSegments = path.split('.');
  }
  pathSegments: string[] = [];

  constructor() { }
}


@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="questionForm">
      <h1>Question Form</h1>

      <form-item [form]="questionForm" path="question"></form-item>
      <form-item [form]="questionForm" path="answers.answer1"></form-item>
      <form-item [form]="questionForm" path="answers.answer2"></form-item>
      <form-item [form]="questionForm" path="answers.answer3"></form-item>

      <button type="submit">submit</button>

      <pre>{{questionForm.value | json}}</pre>
    </form>
  `,
})
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 {}

The form HTML is generated perfectly. But when I add the formControlName directive to the input the HTML generation breaks. Then I get such error:

Error: Cannot find control with name: 'answer1'

Westerly

What's the error are you getting? – Savell

FormControlName directive uses @Optional() @Host() @SkipSelf() parent: ControlContainer to find parent formGroup – Savell

Error: Cannot find control with name: 'answer1' – Westerly

@Savell how that can affect my form? I think FormControlName can find parent in my template, can't it? The FormGroupName also uses that. – Westerly

@Savell Ah, I see. They should be inside the same template, right? – Westerly

Answer 1

To support unlimited number of nested group i would use markup like:

<ng-container [formGroup]="form">
  <ng-container 
     *ngTemplateOutlet="formItemTemplate; context:{ $implicit: 0, group: form }">
  </ng-container>

  <ng-template #formItemTemplate let-i let-group="group">
      <fieldset *ngIf="i < pathSegments.length - 1" class="form-group">
        <legend>{{ pathSegments[i] }}</legend>
        <ng-container 
          *ngTemplateOutlet="formItemTemplate; 
          context:{ $implicit: i + 1, group: group.get(pathSegments[i]) }">
        </ng-container>
      </fieldset>

      <div *ngIf="i + 1 === pathSegments.length" class="form-control" [formGroup]="group">
        <label>{{pathSegments[pathSegments.length - 1]}}</label>
        <input [formControlName]="pathSegments[pathSegments.length - 1]"/>
      </div>
  </ng-template>
</ng-container>

Plunker Example

Savell

Answer 2

As @yurzui mentioned in comment, the problem occurs because the FormControlName directive uses @Optional() @Host() @SkipSelf() parent: ControlContainer to find parent formGroup.

Thus, the following code works fine, but contains code duplicates and supports a limited number of nested groups.

@Component({
  selector: 'form-item',
  template: `
    <ng-container [formGroup]="form">

      <div class="form-control" *ngIf="pathSegments.length === 1">
        <label>{{pathSegments[pathSegments.length - 1]}}</label>
        <input type="text" [formControlName]="pathSegments[pathSegments.length - 1]"/>
      </div>

      <ng-container *ngIf="pathSegments.length === 2" [formGroupName]="pathSegments[0]">
        <div class="form-control">
          <label>{{pathSegments[pathSegments.length - 1]}}</label>
          <input type="text" [formControlName]="pathSegments[pathSegments.length - 1]"/>
        </div>
      </ng-container>

      <ng-container *ngIf="pathSegments.length === 3" [formGroupName]="pathSegments[0]">
        <ng-container [formGroupName]="pathSegments[1]">
          <div class="form-control">
            <label>{{pathSegments[pathSegments.length - 1]}}</label>
            <input type="text" [formControlName]="pathSegments[pathSegments.length - 1]"/>
          </div>
        </ng-container>
      </ng-container>

      <ng-container *ngIf="pathSegments.length === 4" [formGroupName]="pathSegments[0]">
        <ng-container [formGroupName]="pathSegments[1]">
          <ng-container [formGroupName]="pathSegments[2]">
            <div class="form-control">
              <label>{{pathSegments[pathSegments.length - 1]}}</label>
              <input type="text" [formControlName]="pathSegments[pathSegments.length - 1]"/>
            </div>
          </ng-container>
        </ng-container>
      </ng-container>
    </ng-container>
  `,
})

Any ideas how to improve that?

Westerly

I had to do similar except using ngSwitch instead – Bradybradycardia