如何在使用 angular8 的编辑项中有一些更改时抛出验证消息 [英] How to throw validation message, when there is some change in the edit item using angular8

问题描述

我正在使用反应形式 formArray 在单击添加和单击编辑时添加数据部分，编辑后我使用删除和保存按钮保存到表格中.所以基本上一次只能做一个手术.所以，当我点击编辑时，添加新按钮将被禁用，保存数据后，我启用添加按钮.因此，现在如果我使用编辑对项目进行了更改，然后单击删除或使用新项目进行编辑，则必须弹出警告消息，说您要删除到目前为止所做的更改.我正在尝试实施，但它仅适用于第一次，从下一次开始，每次单击编辑图标时都会显示警报消息.任何人都可以帮助我让它工作.

演示:演示

表格的 HTML 到我推送数据的位置并显示我添加的内容以及我从后端获取的项目.

<头><tr><th scope="col" *ngFor="let field of w9ListDetails">{{field.displayName}}</th><th scope="col" class="width75">Actions</th></tr></thead><tr *ngFor="let w9 of agentDetailsList?.w9Info ?agentDetailsList.w9Info :temporaryControls"><td *ngFor="w9ListDetails 的let 字段">{{w9[field.param]}}</td><td class="width75"><button type="button" class="btn btn-outline-primary btn-table {{isReadOnly ? 'link-disabled' : ''}}"title="View" (click)="downLoadFiles(w9)"><i class="fas fa-eye"></i></button><button type="button" class="btn btn-outline-primary btn-table ml-1 {{isReadOnly ? 'link-disabled' : ''}}"title="Edit" (click)="editw9(w9, 'editMode')"><i class="fas fa-edit"></i></button></td></tr></tbody>

formArray 的 HTML:

<form formArrayName="w9Info" *ngFor="let item of agentW9InfoForm.controls.w9Info?.controls; let i = index;"><div class="border rounded p-3 position-relative" [formGroupName]="i"><button class="btn btn-link btn-close position-absolute" (click)="deleteW9Details(i,item)"[class.disabled]="isReadOnly"><i class="fas fa-times fa-lg"></i></button><div class="row"><div class="col-6"><div class="form-group"><label for="">税号 <span class="text-danger">*</span></label><input type="text" class="form-control {{w9ReadOnly ? 'link-disabled' : ''}}"placeholder="税号" name="taxId" formControlName="taxId" maxlength="50"autocomplete="new-tx" [ngClass]="{ 'is-invalid': 已提交 && item.controls.taxId.errors }"allowNumberOnly><div *ngIf="已提交 && item.controls.taxId.errors" class="invalid-feedback"><div *ngIf="item.hasError('required', 'taxId')">需要税号</div>

<div class="col-6"><div class="form-group"><label for="">签名日期 <span class="text-danger">*</span></label><input type="text" class="form-control {{w9ReadOnly ? 'link-disabled' : ''}}" placeholder="MM/DD/YYYY"name="signatureDate" formControlName="signatureDate"[ngClass]="{'is-invalid': 已提交 && item.controls.signatureDate.errors }"><div *ngIf="已提交 && item.controls.signatureDate.errors" class="invalid-feedback"><div *ngIf="item.controls.signatureDate.errors.required">需要签名日期</div>