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

Question

我正在创建一个由两个 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>

下面是我如何为 FormArray 创建、添加和删除项目:

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

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

为什么会这样？我很确定这与有两个 for 循环有关。一个用于 savedItem 控件和一个内部循环，用于遍历列表中的元素以填充 FormArray 但我无法查明问题所在，我仍在学习 Angular

Answer 1

问题在于创建您的 FormArray-property savedItems，也是这一行:

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

这一行意味着，您在 FormArray 中只定义了一个 FormGroup，因此您有一个 index = 0 的元素。

在您的模板文件中，您在 savedItems block 中有两个循环:

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

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

2.) *ngFor="let trailer of trailerModelList; let x = index;"

这是错误的循环，因为您不能像现在这样从模板创建 FromArray-items。

问题简而言之:通过点击Remove entry按钮，所有的savedItems将从数组中移除，因为你只有FormArray 中索引为 0 的一个元素。

解决方案:

第 1 步:使用 createBox() 方法为每个 trailerModelList 项创建一个 FormArray。

  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-property 添加到此循环内的表单项:*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与工作解决方案。