在 Angular 中创建动态 FormControl 时出错

Question

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

ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

用于以下 angular 组件

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

StackBlitz Demo

在 Angular 中创建动态 FormControl 时出错

Error on creating dynamic FormControl in Angular

angular

angular-reactive-forms