angular - RemoveAt(i) 不删除
问题描述
当我调用 removeAt(i) 时,它不会在指定索引处删除。我应该如何删除表单数组?堆栈闪电战
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);
}
解决方案
您不应该同时使用反应式表单和模板驱动表单。
首先从 html 模板中删除 ngModel。
二是依赖FormArray控件而不是nameDriver数组值
在 ts 文件中定义 nameDriverControl getter 并使用它在 html 上迭代表单数组而不是 nameDriver
组件.ts
get nameDriverControl(){
return this.driverInfoForm.get('nameDriver') as FormArray;
}
组件.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>
推荐阅读
- javascript - 进度条值未绑定到使用 Knockout.js 的数据绑定值属性
- angular - 异步 ngOnInit
- routes - 如何将 URL 参数编码为插入到类似于 /abc/:param/def 的 URl 中?
- php - 使用字段 ID 传输字段值
- regex - 带有负前瞻的 nginx 重定向循环
- sql - 使用 postgres regexp_replace() 替换字符串中的整数
- react-native - 如何在后台分别运行两个计时器(React Native)
- python - TensorFlow 数据集映射函数中的随机性
- python - 如何使用 Python 从原始图像中删除所有检测到的线?
- php - 条纹支付 SCA