1

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

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;
    }
  });
}   
}
4

1 回答 1

0

第 1 步：从“form”标签中删除 *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
   }
 }
于 2020-06-16T11:04:38.243 回答