Pass Form Variable in Primeng Dialogue's (onHide) Function when Clicked on "X" Button

Question

I am using Primeng Dialogue with a Form inside it. Form has a cancel button where I am passing form (ngForm) variable to check if the form is in dirty mode or not. If it is in dirty mode I am showing a cofirmation dialogue. The same thing will happen if the user clicks on "X" button in Primeng Dialogue. I am getting NgForm when I click on "Cancel" button but when I am passing form variable in (onHide) function like (onHide)="Cancel(f)", NgForm data is getting as undefined on Cancel(form: NgForm) function. How I can pass the form variable in Primeng Dialogue's (onHide) function when the form is inside this dialogue?

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 Button Function:

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

Step 1: remove *ngIf from "form" tag to get the form object in ts file using @ViewChild.

Step 2: declare the form in ts file like:

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

Step 3:

Close(form: NgForm) {

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