Question

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

Answer 1

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

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

Answer 2

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

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

Answer 3

您可以在此处将任意数量的值作为数组传递给[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 4

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

1.to防止意外提交表单。

<form #queryForm="ngForm" (ngSubmit)="saveQuery()">
    <button mat-button (clcik)="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 5

mat-dialog-close 指令仅适用于按钮元素，不适用于其他任何元素。

Answer 6

因为这引起了许多开发人员的困惑：如果您想在关闭上执行请求和/或使用自定义元素（而不是基本按钮）触发关闭，则可以注入对对话框的引用，然后调用.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()"/>

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

[mat-dialog-close]的用法

6 个答案: