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

Question

I'm having an issue adding multiple input fields to a form. I followed this example but I'm facing problems with more than one input field. Any advice?

My form input

<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);
}

Right now only one value is returned on addControl. I need to display all three values. Any help would be much appreciated.

Answer 1

You are currently repeating the same formControlName for each input. I'm not sure whether this exact syntax will work for dynamic formControlNames, but this will explain the idea:

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