在关闭Angular材质对话框之前，检查Reactive表单的用户变化。

Question

我有一个ReactiveForm在Angular Material Dialog中，它接收一些数据来编辑它，我想防止用户关闭，如果他输入了一些东西并试图离开对话框。

如果它没有被修改，那么关闭它而不问任何问题，但是如果它被修改了，我想显示一个对话框说，它被修改了，你确定你要关闭它吗？

我试着使用valueChanges，但它显示确认对话框，因为字母已经改变了很多次。

这就是我现在的情况。

ngOnInit() {
  this.preventCloseModal();
  this.source = this.commonFunctions.getSourceFromUrl(this.router.url);
  this.getRequest(this.data);
  this.getNinjas();
  this.getStatus();
}

preventCloseModal() {
  this.addForm.valueChanges.pipe(
    debounceTime(2000),
    distinctUntilChanged()
  ).subscribe(
    (data) => {
      if (this.addForm.dirty) {
        this.dialogRef.disableClose = true;
        this.dialogRef.backdropClick().subscribe(_ => {
          let cn = confirm('Estas seguro que deseas cerrar ? Perderas todos los progresos no guardados.')
          if (cn) {
            this.dialogRef.close();
          }
        })
      }
    });
}

编辑1:

我还试了以下方法

async ngOnInit() {
  this.addForm.valueChanges.subscribe((res) => {
    this.isValueChanged = true;
  });
  this.source = this.commonFunctions.getSourceFromUrl(this.router.url);
  this.getRequest(this.data);
  this.getNinjas();
  this.getStatus();
}

@HostListener('window:keyup.esc') onKeyUp() {
  if (this.isValueChanged) {
    // console.log('show alert');
    this.dialogRef.disableClose = true;
    this.dialogRef.backdropClick().subscribe(_ => {
      let cn = confirm('Estas seguro que deseas cerrar ? Perderas todos los progresos no guardados.')
      if (cn) {
        this.dialogRef.close();
      } else {
        return false;
      }
    })
    //return false;
  }
  this.dialogRef.close();
}

我被屏蔽了，有人知道怎么做吗？我试过ngDoCheck，但我创建了一个无限循环。

谢谢你

Answer 1

好吧，我找到了适合我的方法。

我做的第一件事是。 当后端数据填入表单时，我将其设置为原始状态，不加修改。

this.addForm.markAsUntouched;
this.addForm.markAsPristine;

然后，我检查用户是否按了Esc键或者是否在模态外按了键。

对于Esc键，我是这样做的。

@HostListener('window:keyup.esc') onKeyUp() {
    if (this.addForm.dirty) {
        this.dialogRef.disableClose = true;
        let cn = confirm('Estas seguro que deseas cerrar ? Perderas todos los progresos no guardados.')
        if (cn) {
            this.dialogRef.close();
        } else {
            return false;
        }
    }
    this.dialogRef.close();
}

对于背景的点击，我做了这个。

constructor(
        public dialogRef: MatDialogRef<EditRequestComponent>,
        @Inject(MAT_DIALOG_DATA) public data: any,
        private commonFunctions: CommonFunctions,
        private managementService: ManagementService,
        private fb: FormBuilder,
        private router: Router
    ) {
        dialogRef.disableClose = true;
        dialogRef.backdropClick().subscribe(() => {
            if (this.addForm.dirty) {
                this.dialogRef.disableClose = true;
                let cn = confirm('Estas seguro que deseas cerrar ? Perderas todos los progresos no guardados.')
                if (cn) {
                    this.dialogRef.close();
                } else {
                    return false;
                }
            }

            this.dialogRef.close();
        })
    }

正如你所看到的，这是相同的代码，但有一些不同的逻辑，目前，它的工作， 我想分享我的答案，任何人谁是卡住像我一样。现在，它只是需要一个重构，我会做，所以我不重复的代码，它看起来更干净。

非常感谢你的回答 @sibabrat swain !

Answer 2

我想你的问题很简单，但执行起来似乎很难。让我来给你澄清一下。

当你打开对话框时，请确保 dialogConfig.disableClose = true; 以便只有当你触发关闭时才能关闭。按照代码来。

const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.data = item;
dialogConfig.width = '76%';
dialogConfig.height = '63%';
dialogConfig.panelClass = 'custome_css_class';
const dialogRef = this.dialog.open(FormBuilderComponent, dialogConfig);

在FormBuilderComponent里面初始化一个叫做isValueChanged的变量，就像这样。

isValueChanged = false;

现在在FormBuilderComponent内部 ngOnInit() 订阅值的变化。如果值改变了，像这样使isValueChanged为真。

async ngOnInit() {
  this.templateForm.valueChanges.subscribe(() => {
      this.isValueChanged = true;
   });
}

没有当你点击按钮关闭模式检查isValueChanged。如果为真，则显示你的警报。如果为假则关闭模式。

clocseModal() {
   if(this.isValueChanged) {
      // console.log('show alert');
       return false;
   }
 this.dialogRef.close();
}