Question

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

我的表单输入

<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>

page.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仅返回一个值。我需要显示所有三个值。任何帮助将非常感激。

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>

动态地将多个输入字段添加到具有离子/角度的表单中

1 个答案: