To call the dialogue only after making changes in the form in angular

Question

I have an component called add-customer which i am displaying in an dialogue window after clicking an button called add as shown in below image.

In the add-customer there two buttons 1)Save and 2)Cancel.On clicking cancel i am calling an component called delete in another dialogue window as shown in below image

This scenario is working fine for, but i want to call this delete component in the dialogue window only if i did any changes in the registration form (i,e in add-customer component).How can i write conditions for this?? Here is the stackblitz link

You might want to consider implementing routing for this and then using the `CanDeactivate` Guard when the user is leaving this form. In the Guard, you can check whether the form was dirty and then based on that, show the delete modal. Ideally you should be able to do the same thing in your `openDialog` method though. — SiddAjmera, Oct 05 '18 at 07:26
Well, in reactive forms you have something called 'dirty'. You can check if the form has changed by cheching the condition of `form.dirty`. — Roberto Zvjerković, Oct 05 '18 at 07:29
@PrashanthGH similiar to this https://stackoverflow.com/questions/50386974/detect-if-data-in-form-was-changed — Anto Antony, Oct 05 '18 at 07:32

SiddAjmera · Accepted Answer · 2018-10-05T07:44:21.030

1

In your AddCustomerComponent, in the openDialog method, check if the form is dirty and open the model only in that case. If the addCusForm is not dirty you can simply call the closeAll method on the dialog so as to close the modal directly:

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

Here's an Updated StackBlitz for your ref.

edited Oct 05 '18 at 07:44

answered Oct 05 '18 at 07:32

SiddAjmera

38,129
5
72
110

This is working fine, but i want to close the `add-customer` component on clicking the `cancel` button if i didn't did any changes. How can i do this? – PGH Oct 05 '18 at 07:39
Yeah I've already updated the answer for the same. Please check. :) – SiddAjmera Oct 05 '18 at 07:40

score 0 · Answer 2 · answered Oct 05 '18 at 07:34

0

Try to check pristine or dirty property in form.

like this..

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

in component

myForm.form.pristine

answered Oct 05 '18 at 07:34

Karthick Srinivasan

93
6

To call the dialogue only after making changes in the form in angular

2 Answers2