Usage of [mat-dialog-close]

问题:

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?

回答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>

回答2:

Just to make the answer complete: mat-dialog-close will close your dialog if it's clicked, no matter what value you assign to it. If you want to control whether clicking it will close the dialog, use [disabled]="formisvalid" as [other answer] states.

However the value assigned to mat-dialog-close is not ignored. It's interpreted as the dialog result value, and as such can be read by the component that opened the dialog, by subscribing to dialogRef.afterClosed(). This behaviour is explained in the official documentation:

• https://material.angular.io/components/dialog/overview#dialog-content
• https://material.angular.io/components/dialog/api#MatDialogClose
• https://material.angular.io/components/dialog/api#MatDialogRef

回答3:

uses of mat-dialog-close(applicable for dialog)

1.to prevents accidental form submits.

<form #queryForm="ngForm" (ngSubmit)="saveQuery()">
    <button mat-button (clcik)="close()">Cancel</button>
    <!--ended up by submitting the form instead of calling close function, -->
    <!--So you should add mat-dialog-close to prevent it-->
<form>

2.to close dialog.

<button mat-button mat-dialog-close>close</button>
<!--closes dialog even without explicit function-->

3.to return data.

<button mat-button mat-dialog-close="myData">close</button>

Add to the component:

dialogRef.afterClosed().subscribe(data=>{
    console.log("data returned from mat-dialog-close is ",data);
})

回答4:

Here you can pass any number of values as a array to an attribute [mat-dialog-close]

<button [mat-dialog-close]="[organizationId,costCenterId,partnerDepartmentId]" cdkFocusInitial class="iport_primary_btn"mat-raised-button>Go</button>

In parent component you can subscribe to the result after closing dialog like below

dialogRef.afterClosed().subscribe(result => {
console.log(result);
});

回答5:

mat-dialog-close directive only works with button element and not any other one.