angular - [mat-dialog-close] 的用法

Question

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

所以，我有一个带有表单的对话框。如果用户单击提交按钮，则表单通过验证。如果输入有效，则关闭对话框并提交表单。但是，如果输入无效，对话框将保持打开状态并显示一条错误消息。为此，我想使用 [mat-dialog-close]，因为它在 official documentation 中有描述。用法如下:

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

我想我可以只给它传递一个 bool 值，标签是否激活取决于变量的 bool 值。但是，这不起作用。我这样试过:

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

我向它传递了变量 formisvalid。除非输入无效，否则它的值为 true。但现在对话框总是关闭，无论 formisvalid 的值如何。我还尝试用 false 替换它。我认为无论发生什么情况，对话框都会保持打开状态，但它也会始终关闭。

所以，我的问题是:我对 [mat-dialog-close] 的使用有误还是我只是做错了什么？如果这无法通过 [mat-dialog-close] 指令实现，那么实现我想要做的事情的另一种方法是什么？

Answer 1

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

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