在关闭 Angular 材料对话框之前检查用户对反应式表单的更改

Question

I have a ReactiveForm in a Angular Material Dialog that receives some data to edit it, i want to prevent the user to close if it he has typed something and tried to get out of the dialog.

If its not modified then close it without asking anything but if it is, i want to show a dialog that says, its modified, are you sure you want to close it?

I tried to use valueChanges but it shows the confirm dialog as many times as letters have changed.

This is what i have right now:

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

Edit 1:

Also i tried the following:

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

I'm blocked, does anyone know how to do it? I tried ngDoCheck but i creates an infinite loop.

Thank you!

Answer 1

Okay so i found the way that works for me.

The first thing i did was:
When the form is populated with back-end data, i set it to pristine and untouched.

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

After that, i check if the user has pressed Esc key or if he has pressed outside the modal.

For the Esc key i did this:

@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();
}

For the backdrop click i did this one:

constructor(
        ...
) {
        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();
        })
    }

As you can see, it's the same code but with some different logic, for now, it works, i wanted to share my answer for anyone who is stucked like me. Now it just needs a refactor that i will do so i don't repeat code and it looks cleaner.

Thank you very much for your answers @sibabrat swain !

Answer 2

I guess your issues are pretty simple but the execution seems to difficult. Let me clear it for you.

While you open the dialogue box make sure dialogConfig.disableClose = true; so that it can only be closed if you trigger to close. Follow the code.

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

Inside the FormBuilderComponent initialise a variable called as isValueChanged like this.

isValueChanged = false;

Now inside the ngOnInit() subscribe the value changes. If the value changed make isValueChanged true like this.

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

No while you click on the button to close the modal check isValueChanged. If that is true then show your alert. And if false then close the modal.

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