如何在编辑项中使用angular8发生更改时抛出验证消息

我使用反应式表单formArray在单击“添加”和单击“编辑”时添加数据部分，编辑后我使用“删除并保存”按钮保存到表中。 所以基本上一次只能做一个操作。因此，当我单击“编辑”时，“添加新”按钮将被禁用，保存数据后，我将启用“添加”按钮。所以，现在，如果我使用“编辑”对项目进行了更改，并单击以删除或选择一个新项目进行编辑，则必须弹出警告消息，提示您要删除到目前为止所做的更改。我正在尝试实现，但它只在第一次工作，从下一次开始，每次单击编辑图标都会显示警告消息。 谁能帮我把它弄好吗

演示：

将数据推送到表的HTML，并显示我添加的内容和从后端获取的项目

<table class="table table-hover accordion-table"
        *ngIf="agentDetailsList?.w9Info || temporaryControls.length != 0">
        <thead>
          <tr>
            <th scope="col" *ngFor="let field of w9ListDetails"> {{field.displayName}}
            </th>
            <th scope="col" class="width75">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let w9 of agentDetailsList?.w9Info ? agentDetailsList.w9Info : temporaryControls ">
            <td *ngFor="let field of w9ListDetails">
              {{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>
      </table>

HTML:

删除
拯救

正式日期：

  private w9InfoFormInit() {
    if (!this.groupCode && !this.agentCode) {
      // Add
      this.agentW9InfoForm = this.FB.group({
        w9Info: this.FB.array([this.createW9Information()])
      })
    } else {
      //edit
        this.agentW9InfoForm = this.FB.group({
               w9Info:this.FB.array([])
             })
   }
    if (this.mode == 1) {
      this.agentW9InfoForm.disable()
      this.isReadOnly = true;
    }
  }

  editw9InfoDetails(w9,mode) {
    let modes = mode
    if("editMode" ) {
      this.hideUpload = true;
      this.saveUpload = false
    } else {
     this.hideUpload = false;
     this.saveUpload =true
    }
    this.addButtonDisable = true;
    const control = <FormArray>this.agentW9InfoForm.get('w9Info');
    control.controls = []; 
    let info = [];
    info.push(w9)
    for (const emp of info) {
     const grp = this.FB.group({
       taxId: [emp.taxId, Validators.required],
       signatureDate: [emp.signatureDate, [Validators.required]],
       businessType: [emp.businessType, [Validators.required]],
       fileName:[emp.fileName],
       agentW9id:[emp.agentW9id],
       originalFileName: [emp.originalFileName],
       agentCode:[emp.agentCode],
       id:[emp.id]
     });
     control.push(grp);
   }
  }
  editw9(w9,mode) {
    let error = !this.w9InfoDetails.invalid && this.w9InfoDetails.dirty
    if(error != true) {
      this.editw9InfoDetails(w9,mode)

    } else {
      this.notificationService.activate("Validation Message", "Are you sure to delete changes? ", "Yes").then(responseOK => {
        if (responseOK) {
        this.editw9InfoDetails(w9,mode)

        } 
      });
    }

  }

private w9InfoFormInit（）{
如果（！this.groupCode&！this.agentCode）{
//加
this.agentW9InfoForm=this.FB.group({
w9Info:this.FB.array（[this.createW9Information（）]））
})
}否则{
//编辑
this.agentW9InfoForm=this.FB.group({
w9Info:this.FB.array（[]）
})
}
if（this.mode==1）{
this.agentW9InfoForm.disable（）
this.isReadOnly=true；
}
}
editw9InfoDetails（w9，模式）{
让模式=模式
如果（“编辑模式”）{
this.hideUpload=true；
this.saveUpload=false
}否则{
this.hideUpload=false；
this.saveUpload=true
}
this.addButtonDisable=true；
const control=this.agentW9InfoForm.get（'w9Info'）；
control.controls=[]；
让信息=[]；
信息推送（w9）
用于（信息的常量emp）{
const grp=this.FB.group({
taxId:[emp.taxId，需要验证器]，
signatureDate:[emp.signatureDate，[需要验证程序]]，
businessType:[emp.businessType，[Validators.required]]，
文件名：[emp.fileName]，
agentW9id:[emp.agentW9id]，
原始文件名：[emp.originalFileName]，
代理代码：[emp.agentCode]，
id:[皇帝id]
});
控制推力（grp）；
}
}
editw9（w9，模式）{
let error=！this.w9InfoDetails.invalid&&this.w9InfoDetails.dirty
如果（错误！=true）{
此.editw9InfoDetails（w9，模式）
}否则{
这个.notificationService.activate（“验证消息”，“确定要删除更改吗？”，“是”）。然后（responseOK=>{
if（responseOK）{
此.editw9InfoDetails（w9，模式）
} 
});
}
}

表格数组的装箱以及行项目的删除和编辑

 public addW9Details() {
    this.hideUpload = false;
    this.w9ReadOnly = false;
    if(this.agentDetailsList && this.agentDetailsList.w9Info) {
      this.saveUpload = false;
    } else {
      this.saveUpload = true;
    }
    const control = <FormArray>this.agentW9InfoForm.get('w9Info');
    if(this.agentDetailsList && this.agentDetailsList.w9Info) {
      control.controls = []; 
    } 
    control.push(this.createW9Information());
    this.addButtonDisable = true;

  }

  public deleteW9Details(i,item) {
    let error = !this.w9InfoDetails.invalid && this.w9InfoDetails.dirty
    if(!error == true) {
      this.w9InfoDetails.removeAt(i);
      this.addButtonDisable = false
    } else {
      this.notificationService.activate("Validation Message", "Are you sure to delete changes? ", "Yes").then(responseOK => {
        if (responseOK) {
          this.w9InfoDetails.removeAt(i);
          this.addButtonDisable = false
        } 
      });
    }

  }

  public preventW9DetailsEmpty() {
    if (!this.w9InfoDetails.length) {
      let group = this.createW9Information();
      group.reset();
      this.agentW9InfoForm.setControl('w9Info', this.FB.array([group]));
    }
  }

  public get w9InfoDetails(): FormArray {
    return <FormArray>this.agentW9InfoForm.controls['w9Info'];
  }

  private createW9Information() {
    return this.FB.group({
      taxId: [null, Validators.required],
      signatureDate: [null, Validators.required],
      businessType: [null, Validators.required],
      originalFileName: [''],
      agentW9id:0,
      fileName: [''],
      agentCode:parseInt(this.agentbasicInfoForm.controls['agentCode'].value),
      id:''
    });
  }

public addW9Details（）{
this.hideUpload=false；
this.w9ReadOnly=false；
if（this.agentDetailsList&&this.agentDetailsList.w9Info）{
this.saveUpload=false；
}否则{
this.saveUpload=true；
}
const control=this.agentW9InfoForm.get（'w9Info'）；
if（this.agentDetailsList&&this.agentDetailsList.w9Info）{
control.controls=[]；
} 
control.push（this.createW9Information（））；
this.addButtonDisable=true；
}
公共删除9详细信息（一，项目）{
let error=！this.w9InfoDetails.invalid&&this.w9InfoDetails.dirty
如果（！error==true）{
此.w9InfoDetails.removeAt（i）；
this.addButtonDisable=false
}否则{
这个.notificationService.activate（“验证消息”，“确定要删除更改吗？”，“是”）。然后（responseOK=>{
if（responseOK）{
此.w9InfoDetails.removeAt（i）；
this.addButtonDisable=false
} 
});
}
}
公共预防W9detailSempty（）{
如果（！this.w9InfoDetails.length）{
让group=this.createW9Information（）；
组重置（）；
this.agentW9InfoForm.setControl（'w9Info'，this.FB.array（[group]）；
}
}
public get w9InfoDetails（）：FormArray{
返回此.agentW9InfoForm.controls['w9Info']；
}
私有createW9Information（）{
返回此.FB.group({
TAXD:[空，验证器。必选]，
signatureDate:[空，验证器。必需]，
businessType:[null，Validators.required]，
原始文件名：['']，
agentW9id:0，
文件名：['']，
agentCode:parseInt（此.AgentBasicInfo.controls['agentCode'].value），
id:“”
});
}

保存新添加的行项目/将编辑项目保存到网格这两个零件代码在此处包含：

  saveW9Details(item, num) {

      if(this.w9InfoDetails.invalid) {
        this.notificationService.activate("Validation Message", "Please fill Tax Id Number,Signature Date, Business Type", "OK", false).then(responseOK => {
          if (responseOK) {

          }
        });
      } else {
        this.addButtonDisable = false;
        if(this.agentDetailsList && this.agentDetailsList.w9Info) {
          if(item.agentW9id.value) {
            for(var i=0;i<this.agentDetailsList.w9Info.length;i++){
              let itembusinessName = this.detailsSelectDropDown.W9BusinessType.filter(x => x.id === parseInt(item.businessType.value));
              if(this.agentDetailsList.w9Info[i].agentW9id===item.agentW9id.value){
                this.agentDetailsList.w9Info[i].taxId=item.taxId.value;
                this.agentDetailsList.w9Info[i].businessType=item.businessType.value;
                this.agentDetailsList.w9Info[i].signatureDate=item.signatureDate.value;
                this.agentDetailsList.w9Info[i].agentW9id = item.agentW9id.value;
                this.agentDetailsList.w9Info[i].businessName = itembusinessName[0].value;
                this.agentDetailsList.w9Info[i].id = itembusinessName[0].id;
                // updated=true;
                this.temporaryControls.push(this.agentDetailsList.w9Info[i])
              }
           }
          }  
          else {
            let itembusinessName = this.detailsSelectDropDown.W9BusinessType.filter(x => x.id === parseInt(item.businessType.value));
            console.log(itembusinessName,"business")

            let temp={
              taxId:item.taxId.value,
              signatureDate:item.signatureDate.value,
              businessType: item.businessType.value,
              agentW9id:item.agentW9id.value,
              businessName: itembusinessName[0].value,
             originalFileName:item.fileName.value?item.fileName.value.slice(12):'',
             id: this.temporaryControls.length
            }
            if(this.agentDetailsList&& this.agentDetailsList.w9Info) {
              this.agentDetailsList.w9Info.push(temp);
              this.temporaryControls.push(temp)
            } 
            console.log(this.temporaryControls,"dssdf")
          }
        } 


        else {
          let itembusinessName = this.detailsSelectDropDown.W9BusinessType.filter(x => x.id === parseInt(item.businessType.value));
            console.log(itembusinessName,"business")
            let temp={
              taxId:item.taxId.value,
              signatureDate:item.signatureDate.value,
              businessType: item.businessType.value,
              agentW9id:item.agentW9id.value,
              businessName: itembusinessName[0].value,
             originalFileName:item.fileName.value?item.fileName.value.slice(12):'',
             id: this.temporaryControls.length

            };
            console.log(temp,"dsfdsg")
            this.temporaryControls.push(temp)
        }

        console.log(this.temporaryControls,"dssdf")
       this.w9InfoDetails.removeAt(item);
       console.log(this.temporaryControls,"temp")
      }
        }

savew9详细信息（项目，数量）{
if（此.w9InfoDetails.invalid）{
此.notificationService.activate（“验证消息”，“请填写税务Id号、签名日期、业务类型”，“确定”，错误）。然后（responseOK=>{
if（responseOK）{
}
});
}否则{
this.addButtonDisable=false；
if（this.agentDetailsList&&this.agentDetailsList.w9Info）{
if（item.agentW9id.value）{
对于（VARI=0；IX.id==parseInt（item.businessType.value））；
if（this.agentDetailsList.w9Info[i].agentW9id==item.agentW9id.value）{
this.agentDetailsList.w9Info[i].taxId=item.taxId.value；
this.agentDetailsList.w9Info[i].businessType=item.businessType.value；
this.agentDetailsList.w9Info[i].signatureDate=item.signatureDate.value；
this.agentDetailsList.w9Info[i].agentW9id=item.agentW9id.value；
this.agentDetailsList.w9Info[i]。businessName=itembusinessName[0]。值；
this.agentDetailsList.w9Info[i].id=itembusinessName[0].id；
//更新=真；
this.temporaryControls.push（this.agentDetailsList.w9Info[i]）
}
}
}  
否则{
让itembusinessName=this.detailsSelectDropDown.W9BusinessType.filter（x=>x.id==parseInt（item.businessType.value））；
console.log（itembusinessName，“业务”）
  private w9InfoFormInit() {
    if (!this.groupCode && !this.agentCode) {
      // Add
      this.agentW9InfoForm = this.FB.group({
        w9Info: this.FB.array([this.createW9Information()])
      })
    } else {
      //edit
        this.agentW9InfoForm = this.FB.group({
               w9Info:this.FB.array([])
             })
   }
    if (this.mode == 1) {
      this.agentW9InfoForm.disable()
      this.isReadOnly = true;
    }
  }

  editw9InfoDetails(w9,mode) {
    let modes = mode
    if("editMode" ) {
      this.hideUpload = true;
      this.saveUpload = false
    } else {
     this.hideUpload = false;
     this.saveUpload =true
    }
    this.addButtonDisable = true;
    const control = <FormArray>this.agentW9InfoForm.get('w9Info');
    control.controls = []; 
    let info = [];
    info.push(w9)
    for (const emp of info) {
     const grp = this.FB.group({
       taxId: [emp.taxId, Validators.required],
       signatureDate: [emp.signatureDate, [Validators.required]],
       businessType: [emp.businessType, [Validators.required]],
       fileName:[emp.fileName],
       agentW9id:[emp.agentW9id],
       originalFileName: [emp.originalFileName],
       agentCode:[emp.agentCode],
       id:[emp.id]
     });
     control.push(grp);
   }
  }
  editw9(w9,mode) {
    let error = !this.w9InfoDetails.invalid && this.w9InfoDetails.dirty
    if(error != true) {
      this.editw9InfoDetails(w9,mode)

    } else {
      this.notificationService.activate("Validation Message", "Are you sure to delete changes? ", "Yes").then(responseOK => {
        if (responseOK) {
        this.editw9InfoDetails(w9,mode)

        } 
      });
    }

  }

 public addW9Details() {
    this.hideUpload = false;
    this.w9ReadOnly = false;
    if(this.agentDetailsList && this.agentDetailsList.w9Info) {
      this.saveUpload = false;
    } else {
      this.saveUpload = true;
    }
    const control = <FormArray>this.agentW9InfoForm.get('w9Info');
    if(this.agentDetailsList && this.agentDetailsList.w9Info) {
      control.controls = []; 
    } 
    control.push(this.createW9Information());
    this.addButtonDisable = true;

  }

  public deleteW9Details(i,item) {
    let error = !this.w9InfoDetails.invalid && this.w9InfoDetails.dirty
    if(!error == true) {
      this.w9InfoDetails.removeAt(i);
      this.addButtonDisable = false
    } else {
      this.notificationService.activate("Validation Message", "Are you sure to delete changes? ", "Yes").then(responseOK => {
        if (responseOK) {
          this.w9InfoDetails.removeAt(i);
          this.addButtonDisable = false
        } 
      });
    }

  }

  public preventW9DetailsEmpty() {
    if (!this.w9InfoDetails.length) {
      let group = this.createW9Information();
      group.reset();
      this.agentW9InfoForm.setControl('w9Info', this.FB.array([group]));
    }
  }

  public get w9InfoDetails(): FormArray {
    return <FormArray>this.agentW9InfoForm.controls['w9Info'];
  }

  private createW9Information() {
    return this.FB.group({
      taxId: [null, Validators.required],
      signatureDate: [null, Validators.required],
      businessType: [null, Validators.required],
      originalFileName: [''],
      agentW9id:0,
      fileName: [''],
      agentCode:parseInt(this.agentbasicInfoForm.controls['agentCode'].value),
      id:''
    });
  }

  saveW9Details(item, num) {

      if(this.w9InfoDetails.invalid) {
        this.notificationService.activate("Validation Message", "Please fill Tax Id Number,Signature Date, Business Type", "OK", false).then(responseOK => {
          if (responseOK) {

          }
        });
      } else {
        this.addButtonDisable = false;
        if(this.agentDetailsList && this.agentDetailsList.w9Info) {
          if(item.agentW9id.value) {
            for(var i=0;i<this.agentDetailsList.w9Info.length;i++){
              let itembusinessName = this.detailsSelectDropDown.W9BusinessType.filter(x => x.id === parseInt(item.businessType.value));
              if(this.agentDetailsList.w9Info[i].agentW9id===item.agentW9id.value){
                this.agentDetailsList.w9Info[i].taxId=item.taxId.value;
                this.agentDetailsList.w9Info[i].businessType=item.businessType.value;
                this.agentDetailsList.w9Info[i].signatureDate=item.signatureDate.value;
                this.agentDetailsList.w9Info[i].agentW9id = item.agentW9id.value;
                this.agentDetailsList.w9Info[i].businessName = itembusinessName[0].value;
                this.agentDetailsList.w9Info[i].id = itembusinessName[0].id;
                // updated=true;
                this.temporaryControls.push(this.agentDetailsList.w9Info[i])
              }
           }
          }  
          else {
            let itembusinessName = this.detailsSelectDropDown.W9BusinessType.filter(x => x.id === parseInt(item.businessType.value));
            console.log(itembusinessName,"business")

            let temp={
              taxId:item.taxId.value,
              signatureDate:item.signatureDate.value,
              businessType: item.businessType.value,
              agentW9id:item.agentW9id.value,
              businessName: itembusinessName[0].value,
             originalFileName:item.fileName.value?item.fileName.value.slice(12):'',
             id: this.temporaryControls.length
            }
            if(this.agentDetailsList&& this.agentDetailsList.w9Info) {
              this.agentDetailsList.w9Info.push(temp);
              this.temporaryControls.push(temp)
            } 
            console.log(this.temporaryControls,"dssdf")
          }
        } 


        else {
          let itembusinessName = this.detailsSelectDropDown.W9BusinessType.filter(x => x.id === parseInt(item.businessType.value));
            console.log(itembusinessName,"business")
            let temp={
              taxId:item.taxId.value,
              signatureDate:item.signatureDate.value,
              businessType: item.businessType.value,
              agentW9id:item.agentW9id.value,
              businessName: itembusinessName[0].value,
             originalFileName:item.fileName.value?item.fileName.value.slice(12):'',
             id: this.temporaryControls.length

            };
            console.log(temp,"dsfdsg")
            this.temporaryControls.push(temp)
        }

        console.log(this.temporaryControls,"dssdf")
       this.w9InfoDetails.removeAt(item);
       console.log(this.temporaryControls,"temp")
      }
        }

let error = !this.getFormData.invalid && this.getFormData.dirty