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

问题描述

我对[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>

我将变量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屋！