Multiple form input Angular CLI: 12.2.13-CodePudding

I am currently working on a component that is supposed to display multiple forms in this manner : Form component

By clicking on the " " or "-" button, you can add or remove forms. I tried to differentiate the "name" of each by using the index of my *ngFor, but it doesn't seems to work. Writing in one input field will display the data in every field of the column. However, only the data of the last field will be modified. Basically it looks like when I add a new form (index = i) all the other ones get replaced by the new form[i].

Here is my code :

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { LogService } from 'src/app/core/log.service';
import { Declaration } from '../declaration.model';

@Component({
  selector: 'confidential-input-table',
  templateUrl: './input-table.component.html',
  styleUrls: ['./input-table.component.scss']
})
export class InputTableComponent extends DynBaseComponent implements OnInit {
  declaration = new Declaration();
  dataArray : any[] = [];


  constructor(
    protected logger : LogService
  ) {
    super(logger)
  }

  ngOnInit(): void {
    this.declaration = new Declaration();
    this.dataArray.push(this.declaration);
  }

  public onsubmit():void{
    console.log(this.dataArray);
  }
  public addForm(){
    this.declaration = new Declaration();
    this.dataArray.push(this.declaration);
  }
  public removeForm(index : number){
    this.dataArray.splice(index);
  }
  

}

<form (ngSubmit)="onsubmit()">
    <div >
        <div  *ngFor="let obj of dataArray; let i=index">
            <div >
                <label>Emballage{{i}}</label>
                <input type="text"  name="emballage{{i}}" [(ngModel)]="declaration.emballage">
            </div>

            <div >
                <label>Description</label>
                <input type="text"  name="description{{i}}" [(ngModel)]="declaration.description">
            </div>

            <div >
                <label>Quantité</label>
                <input type="text"  name="qte{{i}}" [(ngModel)]="declaration.qte">
            </div>

            <div   *ngIf="i!=0">
                <span (click)="removeForm(i)"  >-</span>
            </div>
        </div>
        <span (click)="addForm()" > </span>
        <button >Submit</button>

    </div>
</form>

CodePudding user response：

You are using the same instance declaration, you dont need to declare it anyway. To fix it, you can try something like :

JS :

  ngOnInit(): void {
    this.dataArray.push(new Declaration());
  }

  public addForm(){
    this.dataArray.push(new Declaration());
  }

HTML :

<form (ngSubmit)="onsubmit()">
    <div >
        <div  *ngFor="let obj of dataArray; let i=index">
            <div >
                <label>Emballage{{i}}</label>
                <input type="text"  name="emballage{{i}}" [(ngModel)]="obj.emballage">
            </div>

            <div >
                <label>Description</label>
                <input type="text"  name="description{{i}}" [(ngModel)]="obj.description">
            </div>

            <div >
                <label>Quantité</label>
                <input type="text"  name="qte{{i}}" [(ngModel)]="obj.qte">
            </div>

            <div   *ngIf="i!=0">
                <span (click)="removeForm(i)"  >-</span>
            </div>
        </div>
        <span (click)="addForm()" > </span>
        <button >Submit</button>

    </div>
</form>