多表單輸入AngularCLI：12.2.13

我目前正在研究一個應該以這種方式顯示多個表單的組件： 表單組件

通過單擊“ ”或“-”按鈕，您可以添加或洗掉表單。我試圖通過使用我的 *ngFor 的索引來區分每個的“名稱”，但它似乎不起作用。在一個輸入欄位中寫入將顯示列的每個欄位中的資料。但是，只會修改最后一個欄位的資料。基本上，當我添加一個新表單（索引 = 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>

uj5u.com熱心網友回復：

您正在使用相同的實體宣告，無論如何您都不需要宣告它。要修復它，您可以嘗試以下操作：

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>

標籤：有角的 打字稿 角12

上一篇：由于CustomValidator應用于非必填表單欄位，因此表單無效

下一篇：洗掉APIAngular中的重復項