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'
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>
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?
来源:https://stackoverflow.com/questions/45658033/angular-4-dynamic-form-with-nested-groups