Wrong value is returning in form submit

Issue

I am creating multiple form groups, but while submitting in one form, it is returning value of last entered form.

export class ExpansionOverviewExample {
  panelOpenState = false;
  tables: string[] = ['one', 'two', 'three', 'four', 'five'];

  formData = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });

  onConvertButtonClick() {
    alert(this.formData.value['firstName']);
    alert(this.formData.value['lastName']);
    console.log(this.formData.value);
  }
}

<mat-accordion>
  <mat-expansion-panel *ngFor="let table of tables">
    <mat-expansion-panel-header>
      <mat-panel-title> {{table}} </mat-panel-title>
    </mat-expansion-panel-header>
    <form [formGroup]="formData" (ngSubmit)="onConvertButtonClick()">
      <mat-form-field>
        <mat-label>First name</mat-label>
        <input matInput type="text" formControlName="firstName" />
      </mat-form-field>

      <mat-form-field>
        <mat-label>Last Name</mat-label>
        <input matInput type="text" formControlName="lastName" />
      </mat-form-field>
      <button>submit</button>
    </form>
  </mat-expansion-panel>
  <mat-expansion-panel
    (opened)="panelOpenState = true"
    (closed)="panelOpenState = false"
  >
  </mat-expansion-panel>
</mat-accordion>

How to get value of particular form value on form submit?

https://stackblitz.com/edit/angular-stcko7?file=src%2Fapp%2Fexpansion-overview-example.html

Solution

For your scenario, you can choose FormArray which will be helpful, I have tweaked your code to some extent and pasting the solution here, have a look,

Your TS file can look like this, suppose you have a component with name AppComponent as given below,

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, FormArray } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
    title = 'stackoverflow-examples';
    panelOpenState = false;
    tables: string[] = ['one', 'two', 'three', 'four', 'five'];
    formData: any;

    get formDataList() {
      return this.formData.controls;
    }

    constructor(
      private fb: FormBuilder
    ) { }

    ngOnInit() {

      this.formData = this.fb.array([]);

      for (let i=0; i<this.tables.length; i++) {
        this.formData.push(new FormGroup({
          firstName: new FormControl(''),
          lastName: new FormControl('')
        }))
      }
    }


  onConvertButtonClick() {
    for (let i=0; i< this.formData.controls.length; i++ ) {
      console.log(this.formData.controls[i].controls.firstName.value);
      console.log('--');
      console.log(this.formData.controls[i].controls.lastName.value);
    }
  }
}

Your HTML file should look something like below,

<mat-accordion>
    <mat-expansion-panel *ngFor="let table of formDataList; index as i;">
      <mat-expansion-panel-header>
        <mat-panel-title> {{tables[i]}} </mat-panel-title>
      </mat-expansion-panel-header>
      <form [formGroup]="table" (ngSubmit)="onConvertButtonClick()">
        <mat-label>First name</mat-label>
        <input matInput type="text" formControlName="firstName" />
    
        <mat-label>Last Name</mat-label>
        <input matInput type="text" formControlName="lastName" />
        <button>submit</button>
      </form>
    </mat-expansion-panel>
    <mat-expansion-panel
      (opened)="panelOpenState = true"
      (closed)="panelOpenState = false"
    >
    </mat-expansion-panel>
  </mat-accordion>

There are a few benefits of using FormArry in a situation like yours, even if you get the requirement of manipulating the form in many different ways like adding another FormControl or removing existing one for some conditions you will be able to run such scenarios happily and effectively

look at the screenshot below for your reference,

Answered By - Deepak Jha