Вызывать диалог только после внесения изменений в форму в угловых

Question

У меня есть компонент с именем add-customer, который отображается в dialogue window после нажатия кнопки с именем add, как показано на рисунке ниже.

В add-customer есть две кнопки 1)Save и 2)Cancel. При нажатии cancel я вызываю компонент с именем delete в другом dialogue window, как показано на изображении ниже

Этот сценарий работает нормально, но я хочу назвать этот delete компонент в dialogue window , только если я внес какие-либо изменения в registration form (т.е. в компоненте add-customer). Как я могу написать условия для этого?Вот ссылка stackblitz

Answer 1

Попробуйте проверить нетронутые или грязные свойства в форме.

вот так ..

<form (ngSubmit)="onSubmit()" #myForm="ngForm">

в компоненте

myForm.form.pristine

Answer 2

В вашем AddCustomerComponent, в методе openDialog, проверьте, является ли форма dirty, и откройте модель только в этом случае.Если addCusForm не dirty, вы можете просто вызвать метод closeAll на dialog, чтобы напрямую закрыть модальное окно:

openDialog(): void {
  if (this.addCusForm.dirty) {
    const dialogRef = this.dialog.open(DeleteComponent, {
      width: '340px',
    });
  } else {
    this.dialog.closeAll();
  }
}

Вот ОбновленоStackBlitz для вашей ссылки.