RemoveAt(i) 不删除

Question

当我调用 removeAt(i) 时，它不会在指定索引处删除。我应该如何删除表单数组？ stackblitz

HTML

<form [formGroup]="driverInfoForm">
<div class="row" formArrayName="nameDriver">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 d-flex" [formGroupName]="i"
  *ngFor="let driver of nameDriver; let i=index">
  <label>{{i+1}}.Name</label>
  <input class="form-control" type="text" id="name" name="name{{i}}"  formControlName="name" [(ngModel)]="nameDriver[i].name"><br/>
  <label>{{i+1}}.Owner Id</label>
  <input class="form-control" type="text" id="ownerId" name="ownerId{{i}}" inputmode="numeric" dashFormat formControlName="ownerId" maxLength="14">
  <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
  <div class="form-group mb-0" *ngIf="i !== 0">
    
    <button class="btn btn-danger" (click)="removeDriver(i)">
      Delete
    </button>
  </div>
  <div class="form-group mb-2">
  
    <button *ngIf="i >= 0 && i < 1" type="button" [hidden]="nameDriver.length > 3" (click)="addDriver()" class="btn btn-primary">
      Add
    </button>
  </div>
</div>
</div>
</div>
</form>

组件

removeDriver(i: number) {

    const control = <FormArray>this.driverInfoForm.controls['nameDriver'];
    control.removeAt(i);

  }

Answer 1

您不应同时使用响应式表单和模板驱动表单。

首先从 html 模板中删除 ngModel。

其次依靠FormArray控件代替nameDriver数组值

在 ts 文件中定义 nameDriverControl getter 并使用它来迭代 html 上的表单数组而不是 nameDriver

component.ts

get nameDriverControl(){
    return this.driverInfoForm.get('nameDriver') as FormArray;
}

component.html

<form [formGroup]="driverInfoForm">
  <div class="row" formArrayName="nameDriver">
    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 d-flex" [formGroupName]="i"
      *ngFor="let driver of nameDriverControl.controls; let i=index">
      <label>{{i+1}}.Name</label>
      <input class="form-control" type="text" id="name" name="name{{i}}"  formControlName="name" ><br/>
      <label>{{i+1}}.Owner Id</label>
      <input class="form-control" type="text" id="ownerId" name="ownerId{{i}}" inputmode="numeric" dashFormat formControlName="ownerId" maxLength="14">
      <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
        <div class="form-group mb-0" *ngIf="i !== 0">

          <button class="btn btn-danger" (click)="removeDriver(i)">
      Delete
    </button>
        </div>
        <div class="form-group mb-2">

          <button *ngIf="i >= 0 && i < 1" type="button" [hidden]="nameDriver.length > 3" (click)="addDriver()" class="btn btn-primary">
      Add
    </button>
        </div>
      </div>
    </div>
  </div>
</form>

Forked Example

RemoveAt(i) 不删除

RemoveAt(i) does not remove

typescript

angular

formarray