Lost of data in Angular form when change the collection of data

Question

i'm stuck in a weird problem:

the "aggiungi gruppo" button add an element in the array which is the one that it's been cycled by the *ngFor attached to the element.

the problem is that if I include all the html inside a Form every time that i add an element to the array the previous values already filled in the get lost, if i keep everything without the form tag everything seems to work fine: here is my code:

    <h1>Gestione esercizi</h1>
 <!-- <form #EsercizioForm="ngForm" style="display: flex;flex-direction: column;" (submit)="OnSubmit(EsercizioForm)"> -->
 <mat-form-field >
  <mat-label>Nome esercizio</mat-label>
  <input matInput placeholder="Squat" required name="nomeEsercizio" ngModel>
</mat-form-field>
<mat-form-field class="example-full-width">
  <mat-label>Descrizione</mat-label>
  <textarea matInput placeholder="Es. accosciata" name="descrizioneEsercizio" ngModel></textarea>
</mat-form-field>
<div style="display: flex;flex-direction: column;">
  <mat-form-field *ngFor="let cg of elencoGruppiMuscolari;let i = index;">
     <mat-select placeholder="gruppo muscolare" name="nome" [(ngModel)]="elencoGruppiMuscolari[i].nome"  >
      <mat-option *ngFor="let g of gruppiMuscolari" [value]="g.nome">
         {{g.nome}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>
<div><span>Aggiungi un gruppo</span><button type="button" mat-icon-button (click)="OnAddClasseGruppoMuscolare()">
  <mat-icon>add</mat-icon>
</button></div>
<button mat-button color="primary" type="button" (click)="OnSubmit(null)">Crea</button>
<!-- </form> -->

and the ts:

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Esercizio } from 'src/app/modelli/esercizio';
import { gruppoMuscolare } from 'src/app/modelli/gruppoMuscolare';

@Component({
  selector: 'app-esercizio',
  templateUrl: './esercizio.component.html',
  styleUrls: ['./esercizio.component.css']
})
export class EsercizioComponent implements OnInit{

  private esercizio:Esercizio
  //  esercizio.gruppiMuscolari =gruppoMuscolare[];
  // esercizio.elencoGruppiMuscolari : gruppoMuscolare[]
  elencoGruppiMuscolari = [{nome:''}];

  gruppiMuscolari = [
    {nome:'bicipiti'},
    {nome:'tricipiti'},
    {nome:'petto'},
    {nome:'dorsali'},
    {nome:'trapezio'},
    {nome:'deltoide'},
    {nome:'quadricipiti'},
    {nome:'ischiodurali'},
    {nome:'polpacci'},
    {nome:'lombari'},
    {nome:'glutei'},
  ];
  ngOnInit(): void {

  }
  constructor(){}

  OnAddClasseGruppoMuscolare()
  {
    //here's where i add the new element
    this.elencoGruppiMuscolari.push({nome:''});
    // 
  }
  OnSubmit(ngForm:NgForm)
  {
    this.esercizio.nome= ngForm.value.nome;
    this.esercizio.descrizione= ngForm.value.descrizione;
    this.esercizio.gruppiMuscolari=this.elencoGruppiMuscolari;
  }
}

score 0 · Answer 1 · answered Jun 07 '23 at 17:30

The problem was that the name of the new control was the same as the previous: So i changed from:

<mat-form-field *ngFor="let cg of elencoGruppiMuscolari;let i = index;">
         <mat-select placeholder="gruppo muscolare" name="nome" [(ngModel)]="elencoGruppiMuscolari[i].nome"  >

to:

 <mat-form-field *ngFor="let cg of elencoGruppiMuscolari;let i = index;">
         <mat-select placeholder="gruppo muscolare" name="nome{{i}}" [(ngModel)]="elencoGruppiMuscolari[i].nome"  >

Lost of data in Angular form when change the collection of data

1 Answers1