当使用Angular的ReactiveForm和递归模板时,父级formGroup指令可能不会被识别。这是因为递归模板会创建多个嵌套的formGroup指令,导致Angular无法正确识别父级formGroup指令。
要解决这个问题,可以使用ControlContainer类来手动注入父级formGroup指令。以下是一个示例代码:
import { Component, Input } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';
@Component({
selector: 'app-recursive-form',
template: `
`,
viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
})
export class RecursiveFormComponent {
@Input() formGroup: FormGroup;
@Input() children: FormGroup[];
}
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-parent-component',
template: `
Parent Component
`
})
export class ParentComponent {
formGroup: FormGroup;
children: FormGroup[];
constructor(private formBuilder: FormBuilder) {
this.formGroup = this.formBuilder.group({
name: ['', Validators.required],
children: [[]]
});
this.children = [];
}
}
通过使用ControlContainer类来注入父级formGroup指令,可以确保递归模板中的每个FormGroup都能正确识别父级formGroup指令。