多表单输入 Angular CLI：12.2.13

Question

我目前正在开发一个应该以这种方式显示多个表单的组件：

通过单击“+”或“-”按钮，您可以添加或删除表单。我试图通过使用我的 *ngFor 的索引来区分每个的“名称”，但它似乎不起作用。在一个输入字段中写入将显示列的每个字段中的数据。但是，只会修改最后一个字段的数据。基本上，当我添加一个新表单 (index = i) 时，所有其他表单都被新表单替换 [i].

这是我的代码：

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 class="containerForm">
        <div class="rowForm" *ngFor="let obj of dataArray; let i=index">
            <div class="groupForm">
                <label>Emballage{{i}}</label>
                <input type="text" class="controlForm" name="emballage{{i}}" [(ngModel)]="declaration.emballage">
            </div>

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

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

            <div class="groupForm2"  *ngIf="i!=0">
                <span (click)="removeForm(i)" class="btnRemove" >-</span>
            </div>
        </div>
        <span (click)="addForm()" class="btnAdd">+</span>
        <button class="btnSubmit">Submit</button>

    </div>
</form>

Answer 1

您正在使用相同的实例声明，无论如何您都不需要声明它。要修复它，您可以尝试类似的方法：

JS :

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

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

HTML :

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

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

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

            <div class="groupForm2"  *ngIf="i!=0">
                <span (click)="removeForm(i)" class="btnRemove" >-</span>
            </div>
        </div>
        <span (click)="addForm()" class="btnAdd">+</span>
        <button class="btnSubmit">Submit</button>

    </div>
</form>

多表单输入 Angular CLI：12.2.13

Multiple form input Angular CLI: 12.2.13

typescript

angular

angular12