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

Question

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

top/first FormArray 从对象列表中填充。而第二个FormArray是给用户填写的。

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

这是我的表单定义：

<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，其中包含我的问题的可重现代码。如果您单击水平栏上方的任何 "Remove Entry"，则两个条目都将从 FormArray 中的该元素中删除，而不是仅从选定的元素中删除。

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

Answer 1

问题在于创建您的 FormArray-属性 savedItems，还有这一行：

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

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

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

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-属性添加到此循环内的表单项中：*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中的所有元素

Angular ReactiveForms FormArray removeAt removes all elements in the FormArray

javascript

angular

typescript

angular-reactive-forms

angular-forms