angular - 使用 ngForm 时关闭 Angular Material 对话框？

Question

如果我使用 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 提交不起作用..我计划进入响应式(Reactive)很快就会在这里形成，但如果有更简单的方法，请告诉我!谢谢。

Answer 1

两个选项:

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

参见also this example

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

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

B:通过点击处理程序关闭:

另请参阅this complete example

<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);
}

当您单击关闭图标、取消按钮或提交按钮时，B 会关闭对话框。