Угловой 4 Динамическая форма с вложенными группами

Обновить

December 2018

Просмотры

3.2k раз

3

Я хочу, чтобы создать реактивную форму из структуры дерева.

Вот код, который создает форму предметов (форма групп и элементов управления). Для управления вложенным в форме группы это я использовать рекурсивный шаблон.

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 {}

Форма HTML генерируется отлично. Но когда я добавить formControlNameдирективу к входу в перерывах поколения HTML. Тогда я получаю такую ошибку:

Error: Cannot find control with name: 'answer1'

2 ответы

5

Для поддержки неограниченного количества вложенной группы я бы использовать разметку, как:

<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

1

Как @yurzui упоминалось в комментариях, проблема возникает потому , что FormControlNameдиректива используется , @Optional() @Host() @SkipSelf() parent: ControlContainer чтобы найти родительский formGroup.

Таким образом, следующий код работает отлично, но содержит код дубликаты и поддерживает ограниченное количество вложенных групп.

@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>
  `,
})

Любые идеи, как улучшить это?