Angular 使用ngForm时是否关闭“角度材质”对话框？

如果使用的是

ngForm

，如何关闭对话框？在弹出此对话框之前，我使用了两个对话框，我知道您可以使用

[mat dialog close]=“true”

获取数据，然后使用

mat_dialog_data

。但在最后一个例子中，我使用了

ngForm

，这样我就可以使用提交的数据，最终通过

.filter（）

创建一个新数组。然后使用这个数组，我使用一个服务将它发送到我的另一个组件，在那里我使用数组和

.map（）

它来创建

geojson

传单层。这一切都很好，但现在我必须点击关闭对话框关闭它？有什么东西可以放在我的

onSubmit

函数中吗？我应该在对话之外这样做吗

<h1 mat-dialog-title>Create a Layer</h1>
<div *ngIf="!arr">
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
<div *ngIf="arr">
<section>
<form class="form-style" fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="center center" #f="ngForm" (ngSubmit)="onSubmit(f)">
  <mat-form-field>
    <input matInput placeholder="Zip Code (Optional)" ngModel name="zip">
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Location (Optional)" ngModel name="location">
  </mat-form-field>
  <div class="radio" *ngFor="let gender of genders" fxLayout="row" fxLayoutGap="10px">
    <label>
      <input type="radio"
      name="gender"
      [(ngModel)]="currentItem"
      [value]="gender">
    </label>
    {{ gender }}
  </div>
  Max Age <mat-slider thumbLabel
      [(ngModel)]="maxAge"
      name="maxAge"
      [min]="0"
      [max]="120"
  ></mat-slider>
  Min Age<mat-slider
      thumbLabel
      [(ngModel)]="minAge"
      name="minAge"
      [min]="0"
      [max]="120"
  ></mat-slider>
  <button type="submit" mat-raised-button color="accent">Create Layer</button>
</form>

创建一个层
{{性别}
最大年龄
最小年龄
创建层

我尝试过在没有括号的情况下使用

mat dialog close

，但

ngForm

submit不起作用。。我计划很快进入反应形式，但如果有更简单的方法让我知道！谢谢。

两个选项：

A：通过提交处理程序关闭：

看

...
public submitForm（）：void{
...
此.matDialogReference.close（[]）；
}

B：通过单击处理程序关闭：

另见

对话标题
取消
确认
public closeDialog（）：void{
此.matDialogReference.close（[]）；
}
public confirmDialog（）：void{
this.matDialogReference.close（this.form.value）；
}

B单击关闭图标、取消按钮或提交按钮时关闭对话框

<div mat-dialog-content>
    <form [formGroup]="form" (submit)="submitForm()">
        ...
    </form>
</div>

public submitForm(): void {
    ...
    this.matDialogReference.close([]);
}

<div mat-dialog-title>
    <h2 class="dialog-title">dialog title</h2>

    <a (click)="closeDialog()">
        <span class="icon-close"></span>
    </a>
</div>

<div mat-dialog-actions>
    <button mat-raised-button (click)="closeDialog()">cancel</button>
    <button mat-raised-button (click)="confirmDialog()">confirm</button>
</div>

public closeDialog(): void {
    this.matDialogReference.close([]);
}

public confirmDialog(): void {
    this.matDialogReference.close(this.form.value);
}