El problema es que tenemos que tomar valores que están debajo del bucle *ngFor, por lo tanto, está tomando el valor que proviene de la primera entrada. Tenemos que buscar valor en una matriz que proviene del valor de las entradas.
HTML
<div *ngFor="let ele of container"> <div *ngIf="keyValue === ''"> <input type="text" [(ngModel)]="keyValue" /> <textarea name="" id="" cols="30" rows="10" [(ngModel)]="textValue" ></textarea> </div> <button (click)="addContainer()">Add More</button> </div>Archivo .ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-sample', templateUrl: './sample.component.html', styleUrls: ['./sample.component.css'], }) export class SampleComponent implements OnInit { constructor() {} container: any[] = [0]; keyValue: String = ''; textValue: String = ''; newArray: any = []; ngOnInit(): void {} addContainer() { this.newArray.push({ key: this.keyValue, values: this.textValue }); console.log(this.newArray); this.container.push(this.container.length); console.log(this.container); } }Debería usar formularios reactivos para crear formularios, si desea crear un formulario muy simple de esta manera.
HTML:
<div *ngFor="let ele of container; let i = index"> <div > <input type="text" [(ngModel)]="newArray[i].values" /> <textarea name="" id="" cols="30" rows="10" [(ngModel)]="newArray[i].textValue" ></textarea> </div> </div> <button (click)="addContainer()">Add More</button>TS:
container: any[] = [1]; newArray: any = [{ key: 1, values: '' }]; ngOnInit(): void {} addContainer() { let keyValue = this.container.length + 1; this.newArray.push({ key: keyValue, values: '' }); console.log(this.newArray); this.container.push(keyValue); console.log(this.container); }