javascript - 使用离子/角度向表单动态添加多个输入字段

Question

我在向表单添加多个输入字段时遇到问题。我遵循了这个示例，但我遇到了多个输入字段的问题。有什么建议吗？

我的表单输入

<ion-list>
      <ion-row>
            <ion-col>
                 <form [formGroup]="slideThreeForm" class="ion-padding ion-margin">

                    <ion-item *ngFor="let control of slideThreeForm.controls | keyvalue">
                    <ion-input required type="text" [formControlName]="control.key" placeHolder="Name"></ion-input>
                    <ion-input required type="text" [formControlName]="control.key" placeHolder="Price"></ion-input>
                    <ion-input required type="number" [formControlName]="control.key" placeHolder="Quantity"></ion-input>
                    <ion-icon (click)="removeControl(control)" name="close-circle"></ion-icon>
                    </ion-item>

                 </form>
                    <ion-button expand="full" color="light" (click)="addControl()">Add Item</ion-button>
            </ion-col>
      </ion-row>
</ion-list>

页面.ts

export class ModalSlidePage  {
@ViewChild('quoteSlider') quoteSlider;

public slideOneForm: FormGroup;
public slideTwoForm: FormGroup;
public slideThreeForm: FormGroup;
private itemCount: number = 1;


public submitAttempt: boolean = false;

modalTitle:string;

constructor(
  private modalController: ModalController,
  public formBuilder: FormBuilder
) {
  this.slideOneForm = formBuilder.group({
  companyName: [''],
  quoteType: [''],
  quoteDueDate: ['']
});

this.slideTwoForm = formBuilder.group({
  companyAddress: [''],
  clientAddress: [''],
  comments: ['']
});

this.slideThreeForm = formBuilder.group({
  item1: ['']
  });
 }


async closeModal() {
const onCloseData: string = "Wrapped Up!";
await this.modalController.dismiss(onCloseData);
}

addControl(){
this.itemCount++;
this.slideThreeForm.addControl('item' + this.itemCount, new 
FormControl(''));
 }

removeControl(control){
this.slideThreeForm.removeControl(control.key);
}

现在 addControl 上只返回一个值。我需要显示所有三个值。任何帮助将非常感激。

标签： javascriptangularionic-framework

Answer 1

您当前正在为每个输入重复相同的 formControlName。我不确定这个确切的语法是否适用于动态 formControlNames，但这将解释这个想法：

<ion-list *ngFor="let control of slideThreeForm.controls | keyvalue">
  <ion-item>
    <ion-label>{{ control.key }} Name</ion-label>
    <ion-input required type="text" formControlName="{{ control.key }}_name" placeHolder="Name"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>{{ control.key }} Price</ion-label>
    <ion-input required type="text" formControlName="{{ control.key }}_price" placeHolder="Price"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>{{ control.key }} Quantity</ion-label>
    <ion-input required type="number" formControlName="{{ control.key }}_quantity" placeHolder="Quantity"></ion-input><ion-icon (click)="removeControl(control)" name="close-circle"></ion-icon>
  </ion-item>
</ion-list>