CODEWITHSUNDEEP
angularngforangular-reactive-forms
Rohit
Rohit

Reputation: 3146

ngFor not updating when pushing new data

I have a set of reactive forms that I'm setting up as an array of reactive forms:

typesForms: FormGroup[] = [];

Which I loop through in my html:

<form *ngFor="let type of typesForms; let i = index" [formGroup]="typesForms[i]" class="row">

However, when I push a new form, the HTML doesn't update.

this.typesForms.push(this.formBuilder.group({
    type: { value: data['type'], disabled: true }
}));

I've logged out the resulting data, and it shows the new form object, but nothing on the front end. I assume this has something to do with reactive forms, but I'm not sure if I'm screwing something else up.

Upvotes: 3

Views: 1619

Answers (1)

embarq
embarq

Reputation: 335

Have you tried just <form *ngFor="let type of typesForm" [formGroup]="type" class="row">?

Update:

If you have multiple forms you can utilize Angular's built-in FormArray data structure. It does simplifying manipulations on set of form groups - allows you to easily track changes and validate linked FormGroup's or FormControl's.

Punkr example

Note: thanks to how things structured under the ReactiveFormsModule hood you can compose FormArrays, FormGroups and FormControls as you want:

  • you can have a FormArray as field a of FormGroup
  • FormArray can contain FormArrays, FormGroups and FormControls

Upvotes: 1

Related Questions