首页 文章

[mat-dialog-close]的用法

提问于
浏览 次
4

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

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

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

我以为我可以传递一个布尔值，标签是否有效取决于变量的布尔值 . 但是，这不起作用 . 我试过这样的：

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

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

所以，我的问题是：我是否错误地使用了[mat-dialog-close]，或者我只是做错了什么？如果使用[mat-dialog-close]指令无法实现这一点，那么实现我想要做的事情的另一种方法是什么？

angular angular-material2

2 回答

  • 4

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

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

    只是为了完成答案： mat-dialog-close 将关闭你的对话框，无论你分配给它的值是什么 . 如果要控制是否单击它将关闭对话框，请使用 [disabled]="formisvalid" 作为[其他答案]状态 .

    但是，不会忽略分配给 mat-dialog-close 的值 . 它被解释为对话框结果值，因此可以通过订阅 dialogRef.afterClosed() 由打开对话框的组件读取 . 官方文档中解释了此行为：

    回复于

相关问题