Error on creating dynamic FormControl in Angular

Question

Error on creating dynamic FormControl in Angular, console throws following error:

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

for following angular component

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

Yerkon · Accepted Answer · 2018-05-11 08:03:15Z

2

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

Object definition is wrong, replace to:

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

StackBlitz Demo

answered May 11, 2018 at 8:03

Yerkon

4,8182 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hozefam Over a year ago

Thanks a lot ... noob mistake

Collectives™ on Stack Overflow

Error on creating dynamic FormControl in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related