[mat-dialog-close]的用法

Question

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

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

<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]指令无法实现这一点,那么实现我想要做的事情的另一种方法是什么？

Answer 1

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

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

Answer 2

mat-dialog-close的使用（适用于对话框）

1.防止意外表单提交。

<form #queryForm="ngForm" (ngSubmit)="saveQuery()">
    <button mat-button (click)="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.关闭对话框。

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

3.返回数据。

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

添加到组件：

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

Answer 3

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

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

• 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

Answer 4

在这里，您可以将任意数量的值作为数组传递给属性 [mat-dialog-close]

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

在父组件中，您可以在关闭对话框后订阅结果，如下所示

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

Answer 5

由于这让很多开发人员感到困惑：如果您想在关闭时执行请求和/或使用自定义元素（而不是基本按钮）触发关闭，您可以注入对对话框的引用，然后调用.close：

constructor(public dialogRef: MatDialogRef<DialogComponent>) { } - 用您的组件名称替换 DialogComponent

然后在你的组件类上定义一个方法并在你的模板中调用它：

async closeDialog() {
    try {
      await someAsyncThing();
      this.dialogRef.close(); // make sure it only closes if the upper async fn succesfully ran!
    } catch(e) {
      this.errorMessage = e.response.message;
    }
}

<fancy-ass-close-item (click)="closeDialog()"/>

与此处的其他答案相反，这使您可以在关闭对话框之前调用请求（从而在对话框内显示错误消息或其他内容）。