Usage of [mat-dialog-close]

Question

I am a bit confused about the usage of [mat-dialog-close].

So, I have a dialog with a form. If the user clicks the submit button, the form is validated. If the input is valid, the dialog is closed and the form is submitted. However, if the input is invalid, the dialog remains opened and an error message is shown. For that I want to use [mat-dialog-close] as it is described in the official documentation where it is used as follows:

<button mat-button [mat-dialog-close]="true">Yes</button> 

I thought that I can just pass it a boolean and whether the tag is active depends on the boolean value of the variable. However, this does not work. I tried it like this:

<button type="submit" (click)="addUser()" [mat-dialog-close]="formisvalid" mat-button>Submit</button> 

I passed it the variable formisvalid. It's value is true unless the input is invalid. But now the dialog closes always, regardless of the value of formisvalid. I also tried replacing it with false. I thought the dialog would remain opened no matter what happens, but it would also always close.

So, my question is: am I mistaken about the use of [mat-dialog-close] or am I just doing something wrong? If this is not achievable with the [mat-dialog-close] directive, what would be another way to achieve what I'm trying to do?

Answer 1

Set your button to have disabled on it if the form is not valid. This way the button cannot be clicked unless the form is valid, meaning it won't close unless the form is valid

<button type="submit" (click)="addUser()" mat-dialog-close [disabled]="formisvalid" mat-button>Submit</button>