在 Angular 中创建动态表单控件时出错

Question

在Angular 中创建动态 FormControl 时出错，控制台抛出以下错误：

错误

错误：表单组需要一个表单组实例。请传入一个。

用于以下角度组件

import { Component, OnInit } from "@angular/core";
import { FormGroup, FormControl } from "@angular/forms";
@Component({
selector: "app-dynamic-form",
template: `
<form [formGroup]="form">
<div *ngFor="let prop of personProps">
<input type="text" [formControlName]="prop">
</div>
</form>
<pre>{{form.value | json }}</pre>
`,
styles: []
})
export class DynamicFormComponent implements OnInit {
form: FormGroup;
person: {
firstname: "Hozefa";
age: 23;
};
personProps = [];
constructor() {}
ngOnInit() {
const formDataObj = {};
for (const prop of Object.keys(this.person)) {
formDataObj[prop] = new FormControl(this.person[prop]);
this.personProps.push(prop);
}
this.form = new FormGroup(formDataObj);
}
}

Answer 1

person: {
firstname: "Hozefa";
age: 23;
};

对象定义错误，请替换为：

person = {
firstname: "Hozefa",
age: 23
};

堆栈闪电战演示