Question

我正在创建一个包含两个pwd # 5和FormArray的表单。表单数组中的每个元素上都有一个按钮，可以从数组中删除该元素。

前/后items是从对象列表中填充的。而第二个savedItems供用户填写。

问题是，每当我单击“删除条目”按钮时，在第一个FormArray上，FormArray中的所有元素都会被删除，而不是属于（在同一位置）“删除条目”按钮。

这是我的表单定义：

FormArray

这是我为FormArray创建，添加和删除项目的方式：

<form [formGroup]="boxForm" (ngSubmit)="onSubmit(boxForm)">
<div class="row" formArrayName="savedItems" *ngFor="let item of getSavedItems.controls; let i = index;"  >
  <div *ngFor="let trailer of trailerModelList; let x = index;" >
    <div class="form-group" [formGroupName]="i" style="margin-bottom: 10px">
      <div>
        <div class="col-sm-5 form-group">
          <label for="name">Origin</label>
          <input class="form-control" type="text" placeholder="From" value="{{trailer.fromLocation}}"/>
        </div>
        <div class="col-sm-5 form-group">
          <label for="name">Destination</label>
          <input class="form-control" type="text" placeholder="To" value="{{trailer.toLocation}}" />
        </div>
        <div class="col-sm-3 form-group">
          <label for="name">Name</label>
          <input class="form-control" type="text" placeholder="Name" value="{{trailer.name}}"/>
        </div>
        <div class="col-xs-2">
          <button class="btn btn-danger" type="button" (click)="removeSavedItem(i)">Remove Entry</button>
        </div>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="row" formArrayName="items" *ngFor="let item of getItems.controls; let i = index;" >
  <div class="form-group" [formGroupName]="i">
    <div class="col-md-5 form-group" >
      <label for="name">Origin</label>
      <input class="form-control" type="text" formControlName="origin" >
    </div>
    <div class="col-md-5 form-group">
      <label for="name">Destination</label>
      <input class="form-control" type="text" formControlName="to">
    </div>
    <div class="col-sm-3 form-group">
      <label for="name">Name</label>
      <input class="form-control" type="text" formControlName="name" placeholder="Name"/>
    </div>
    <div class="col-xs-2">
      <button class="btn btn-danger" type="button" (click)="removeItem(i)">Remove Entry</button>
    </div>
  </div>
</div>
<button class="btn btn-success" type="submit"  style="margin-right: 10px">Go</button>
<button class="btn btn-primary" type="button" (click)="addItem()" style="margin-right: 10px">New Box</button>

这是一个stackblitz，带有我的问题的可重复代码。如果单击水平条上方的任何“删除条目”，则两个条目将从FormArray中的该元素中删除，而不仅仅是选定的条目。

为什么会这样？我很确定这与两个for循环有关。一个用于saveItem控件，一个用于在列表中的元素上循环以填充get getItems(): FormArray { return this.boxForm.get('items') as FormArray; } get getSavedItems(): FormArray { return this.boxForm.get('savedItems') as FormArray; } createBox(): FormGroup { return this.formBuilder.group({ name: ['', [Validators.required, Validators.minLength(3)]], origin: ['', [Validators.required, Validators.minLength(1)]], to: ['', [Validators.required, Validators.minLength(1)]] }); } addItem(): void { this.getItems.push(this.createBox()); } removeItem(index) { this.getItems.removeAt(index); } removeSavedItem(index) { this.getSavedItems.removeAt(index); }的内部循环，但是我无法查明问题，我仍在学习Angular的方法

Answer 1

问题出在创建您的FormArray属性savedItems，也是这一行：

...
savedItems: this.formBuilder.array([this.createBox()])
...

此行表示，您在FormGroup中只定义了一个FormArray，因此您有一个index = 0元素。

在您的模板文件中，savedItems的块中有两个循环：

1。）*ngFor="let item of getSavedItems.controls; let i = index;"

这是正确的循环，将为removeAt提供正确的功能。

2。）*ngFor="let trailer of trailerModelList; let x = index;"

这是错误的循环，因为无法像现在一样从模板创建FromArray个项目。

简而言之，问题：通过单击Remove entry-按钮，两个（全部）savedItems都将从数组中删除，因为在其中只有一个索引为0的元素FormArray。

解决方案：

步骤1：为每个trailerModelList项目创建一个FormArray和createBox()方法。

  ngOnInit() {
    this.boxForm = this.formBuilder.group({
      items: this.formBuilder.array([this.createBox()]),
      savedItems: this.formBuilder.array([])
    });

    this.trailerModelList = new Array();
    this.trailerModelList.push(new TrailerModel(1, 'test', 'London', 'Paris'));
    this.trailerModelList.push(new TrailerModel(2, 'test2', 'Amsterdam', 'Berlin'));

    this.trailerModelList.forEach(item => {
      (this.boxForm.get('savedItems') as FormArray).controls.push(this.createBox(item.name, item.fromLocation, item.toLocation));
    });
  }

....

  createBox(name: string = null, origin: string = null, to: string = null): FormGroup {
    return this.formBuilder.group({
      name: [name, [Validators.required, Validators.minLength(3)]],
      origin: [origin, [Validators.required, Validators.minLength(1)]],
      to: [to, [Validators.required, Validators.minLength(1)]]
    });
  }

步骤2：从模板中删除以下循环：*ngFor="let trailer of trailerModelList; let x = index;"

步骤3：在此循环内，将formControlName属性添加到表单项：*ngFor="let item of getSavedItems.controls; let i = index;"

<div class="row" formArrayName="savedItems" *ngFor="let item of getSavedItems.controls; let i = index;"  >
      <div>
        <div class="form-group" [formGroupName]="i" style="margin-bottom: 10px">
          <div>
            <div class="col-sm-5 form-group">
              <label for="name">Origin</label>
              <input class="form-control" type="text" placeholder="From" formControlName="origin"/>
            </div>
            <div class="col-sm-5 form-group">
              <label for="name">Destination</label>
              <input class="form-control" type="text" placeholder="To" formControlName="to" />
            </div>
            <div class="col-sm-3 form-group">
              <label for="name">Name</label>
              <input class="form-control" type="text" placeholder="Name" formControlName="name"/>
            </div>
            <div class="col-xs-2">
              <button class="btn btn-danger" type="button" (click)="removeSavedItem(i)">Remove Entry</button>
            </div>
          </div>
        </div>
      </div>
    </div>

这里是stackblitz，有有效的解决方案。

Angular ReactiveForms FormArray removeAt移除FormArray中的所有元素

1 个答案: