[mat-dialog-close]的用法 [英] Usage of [mat-dialog-close]

问题描述

我对 [mat-dialog-close] 的用法有点困惑.

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

所以，我有一个带有表单的对话框.如果用户单击提交按钮，则表单被验证.如果输入有效，则关闭对话框并提交表单.但是，如果输入无效，对话框将保持打开状态并显示错误消息.为此，我想使用 [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>

我将变量 formisvalid 传递给它.除非输入无效，否则它的值为 true.但是现在对话框总是关闭，不管 formisvalid 的值如何.我也尝试用 false 替换它.我以为无论发生什么对话框都会保持打开状态，但它也总是会关闭.

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.

所以，我的问题是:我是否误解了 [mat-dialog-close] 的使用，或者我只是做错了什么?如果使用 [mat-dialog-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?

推荐答案

如果表单无效，请将您的按钮设置为禁用.这样，除非表单有效，否则无法单击按钮，这意味着除非表单有效，否则它不会关闭

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>

这篇关于[mat-dialog-close]的用法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！