我正在尝试使用Angular的反应式表单创建根据某种模型动态构建的表单。该模型是一个可以更改的复杂对象，并且包含嵌套的对象和值，例如（以TypeScript表示法）：
interface Model {
// ... other stuff
config: { // complex object which can change, here's an example for some structure
database: {
uri: string;
name: string;
};
server: {
endpoint: {
host: string;
port: number;
};
requestTimeoutMs: number;
};
};
}
使用该对象，我像这样构建了FormGroup：
@Component({
// ...
templateUrl: './form.component.html'
})
export class FormComponent {
@Input() model: Model;
public form: FormGroup;
// instantiating the whole form
public ngOnInit(): void {
this.form = new FormGroup({
// ... instantiating other controls using the model,
config: new FormGroup({}),
});
// building the config form using model.config which is dynamic
this.buildForm(this.form.get('config') as FormGroup, this.model.config);
}
// helper functions used in the template
public isGroup(control: AbstractControl): control is FormGroup {
return control instanceof FormGroup;
}
public typeOf(value: any): string {
return typeof value;
}
// building the config form
private buildForm(group: FormGroup, model: object): void {
for (const key in obj) {
const prop = obj[key];
let control: AbstractControl;
if (prop instanceof Object) { // nested group
control = new FormGroup({});
this.buildForm(control as FormGroup, prop);
} else { // value
control = new FormControl(prop);
}
group.addControl(control);
}
}
}
此代码按预期工作，并根据对象创建表单。我知道这不会检查数组和FormArray，因为我目前不使用它们。
构建表单后，我试图在模板中显示整个表单，这是我遇到的问题。这是我的模板：
<form [ngForm]="form" (ngSubmit)="...">
<!-- ... other parts of the form -->
<ng-container [ngTemplateOutlet]="formItemTemplate"
[ngTemplateOutletContext]="{parent: form, name: 'config': model: model; level: 0}">
</ng-container>
<ng-template #formItemTemplate let-parent="parent" let-name="name" let-model="model" let-level="level">
<ng-container [ngTemplateOutlet]="isGroup(parent.get(name)) ? groupTemplate : controlTemplate"
[ngTemplateOutletContext]="{parent: parent, name: name, model: model, level: level}">
</ng-container>
</ng-template>
<ng-template #groupTemplate let-parent="parent" let-name="name" let-model="model" let-level="level">
<ul [formGroup]="parent.get(name)">
<li>{{name | configName}}</li>
<ng-container *ngFor="let controlName of parent.get(name) | keys">
<ng-container [ngTemplateOutlet]="formItemTemplate"
[ngTemplateOutletContext]="{name: controlName, model: model[name], level: level + 1}">
</ng-container>
</ng-container>
</ul>
</ng-template>
<ng-template #controlTemplate let-name="name" let-model="model" let-level="level">
<li class="row">
<div class="strong">{{name | configName}}</div>
<ng-container [ngSwitch]="typeOf(obj[name])">
<input type="text" *ngSwitchCase="'string'" [formControlName]="name">
<input type="number" *ngSwitchCase="'number'" [formControlName]="name">
<input type="checkbox" *ngSwitchCase="'boolean'" [formControlName]="name">
</ng-container>
</li>
</ng-template>
</form>
让我为您分解一下，以防不了解组件的模板：
我有formItemTemplate的工作是区分parent.get(name)（子控件）是FormGroup还是FormControl。如果子控件是FormGroup，则创建groupTemplate的子模板，否则创建controlTemplate。
在groupTemplate中，我创建了一个ul节点，该节点将[formGroup]绑定到parent.get(name)（子组），并在其中 （分层）继续为该子组的每个控件创建一个formItemTemplate模板 ，我使用创建的keys管道获得了其控件名称，该管道仅返回{{1 }}的值。基本上-递归。
在Object.keys()中，我只是创建一个新的controlTemplate，并在其中创建了一个将li绑定到[formControlName]中给出的name的输入。
问题是出现以下错误：
找不到名称为“ ...”的控件
我知道，如果您将[ngTemplateOutletContext]绑定到控件上的名称在绑定到FormGroup的[formControlName]范围内找不到，则会发生这种情况。这很奇怪，因为我什至签入了DevTools并看到[formGroup]属性被应用于该组的ng-reflect-form="[object Object]"，这意味着它确实是绑定的，并且很可能绑定到了正确的ul
在调试FormGroup时使用从模板上下文传递的其他参数（例如isGroup()和model）时，我注意到每个对象多次调用name ，而不是对每个对象一次，就像这样：
isGroup()？然后崩溃，而没有完成整个模型的迭代，除非我单击组件中的某些输入，这太奇怪了。
我见过this question，它与我的相似，但对解决问题没有帮助。预先感谢！
答案 0 :(得分：0)
通过在[formGroup]="parent"中的li元素中添加controlTemplate解决了我自己的问题。哎呀！