单击“ X”按钮时，Primeng对话（onHide）函数中的传递形式变量

Question

我正在使用带有表单的Primeng对话。表单有一个取消按钮，我在其中传递表单（ngForm）变量来检查表单是否处于脏模式。如果它处于脏模式，我将显示确认对话。如果用户单击Primeng Dialogue中的“ X”按钮，将会发生同样的事情。当我单击“取消”按钮时得到NgForm，但是当我在（onHide）=“ Cancel（f）”之类的（onHide）函数中传递表单变量时，NgForm数据在Cancel（form：NgForm）函数中变得未定义。当表单位于此对话中时，如何在Primeng Dialogue的（onHide）函数中传递form变量？

HTML：

<p-dialog header="Retirement Plan Proposal" [(visible)]="isShowProspectModal"
      modal="modal" width="1000" height="590" styleClass="modal-blue proposalModal 
stickyFooterModal" appendTo="body" [closeOnEscape]="false" (onHide)="Cancel(f)">

<form style="padding-top:7px;" #f="ngForm" name="prospectDetailForm" *ngIf="isShowProspectModal"
    (ngSubmit)="f.form.valid" novalidate autocomplete="off">


<p-footer>
         <button [disabled]="(!f.dirty && !isFileUploaded) || isLoadingSave"
            *ngIf="isSaveButtonVisible" class="btn btn-primary btn-small mr5"
            type="submit"
            (click)="saveProspect(true, f)" label="Save">
      <i class="fa fa-floppy-o"></i>&nbsp;Save
      <span class="icon-spiner" *ngIf="isLoadingSave"></span>
    </button>
    <button class="btn btn-primary btn-small" *ngIf="isSaveButtonVisible" type="button"
            [disabled]="(!f.dirty && !isFileUploaded) || isLoadingSave"
            (click)="Cancel(f)" label="Cancel">
      <i class="fa fa-close"></i>&nbsp;Cancel
    </button>
  </div>
</p-footer>
 </form>
  <p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="400" appendTo="body"> 
</p-confirmDialog>
</p-dialog>

取消按钮功能：

Cancel(form: NgForm) {

if (form.dirty) {

  this.confirmationService.confirm({
    message: 'Data has been changed in this form. Do you want to cancel?',

    accept: () => {
      this.isShowProspectModal = false;
    }
  });
}   
}

Answer 1

步骤1：从@formChild标记中删除* ngIf，以使用@ViewChild获得ts文件中的表单对象。

步骤2：在ts文件中声明表单，例如：

@ViewChild('f', { static: true }) prospectEditForm: NgForm;

步骤3：

Close(form: NgForm) {

if (this.prospectEditForm && this.prospectEditForm.dirty) {
//do whatever you want
   }
 }