Перед закрытием проверьте наличие изменений в реактивной форме внутри диалогового окна Angular материала.

Question

У меня есть ReactiveForm в диалоге материалов Angular, который получает некоторые данные для его редактирования, я хочу, чтобы пользователь не закрывался, если он что-то напечатал и попытался выйти из диалогового окна.

Если он не изменен, закройте его, ничего не спрашивая, но если это так, я хочу показать диалоговое окно, в котором говорится, что он изменен, вы уверены, что хотите его закрыть?

Я пытался использовать 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();
          }
        })
      }
    });
}

Edit 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, но создал бесконечное l oop.

Спасибо!

Answer 1

Хорошо, поэтому я нашел способ, который работает для меня.

Первое, что я сделал, было:
Когда форма заполняется внутренними данными, я устанавливаю ее в нетронутом виде.

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

После этого я проверяю, нажал ли пользователь клавишу Es c или он нажал за пределами модального окна.

Для клавиши Es c я сделал следующее:

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

Как видите, это тот же код, но с некоторыми другими логами c, на данный момент он работает, Я хотел поделиться своим ответом со всеми, кто застрял, как я. Теперь ему просто нужен рефакторинг, который я сделаю, чтобы не повторять код и он выглядел чище.

Большое спасибо за ваши ответы @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;

Теперь внутри ngOnInit() подпишитесь на изменение значения. Если значение изменилось, сделайте isValueChanged истинным, как это.

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

Нет, пока вы нажимаете кнопку, чтобы закрыть модальную проверку isValueChanged. Если это правда, покажите свое предупреждение. А если false, закройте модальное окно.

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