Angular Material的弹窗组件dialog取消mat-dialog-actions自动关闭
场景
在使用Angular Material（https://material.angular.io/）的dialog组件时遇到了一个问题
按照官网上的步骤发现不管点击取消还是确认，都会在关闭dialog弹窗后才能获取到数据，
这就导致了当我要在dialog中添加表单并进行验证时，不管验证是否成功都会关闭弹窗
思路一
虽然考虑过用disabled来解决问题，但总觉得这样的解决方案不符合用户交互规范，应该在点击确认时，先根据校验规则提示用户的不规范填写，而不是直接禁用
思路二
想到可不可以不用在html中使用mat-dialog-actions属性，而是通过js / ts 在提交并验证成功后再手动调用关闭弹窗并传值
根据这个思路最后找到了解决方案
关键代码
<div mat-dialog-actions><button mat-button (click)="onNoClick()">关闭</button><button mat-button cdkFocusInitial (click)="submit($event)">增加</button></div>submit(e){if(!AddForm.invalid){this.dialogRef.close(this.newNet);//当表单验证成功后才调用close，并将信息传递给dialog组件}}
最后贴出完整代码
<p>新增网络</p><form [formGroup]="netAddForm"><div mat-dialog-content class="input-form"><mat-form-field appearance="legacy" class="input-full-width"><mat-label>网络名称</mat-label><input matInput [(ngModel)]="newNet.name" [formControl]="rules.name"/><mat-error *ngIf="rules.name.invalid">{{getErrorMessage()}}</mat-error></mat-form-field><br/><mat-form-field appearance="legacy" class="input-full-width"><mat-label>网络ID</mat-label><input matInput [(ngModel)]="id" [formControl]="id"/><mat-error *ngIf="id.invalid">{{getNetIDErrorMessage()}}</mat-error></mat-form-field><br/></div><div mat-dialog-actions><button mat-button (click)="onNoClick()">关闭</button><button mat-button cdkFocusInitial (click)="submit($event)">增加</button></div></form>
import {Component, Inject} from '@angular/core';import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';import * as _ from 'lodash';import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';import {network } from '../function.models';export interface DialogData {newNet:{name: string;netid:string;}}@Component({selector: 'network-dialog',templateUrl: './network-ponent.html',styleUrls: ['./network-ponent.css'],})export class NetWorkDialog {newNet: network = {netid: null,name: null,};netAddForm:FormGroup;rules={name:new FormControl('', [Validators.required, Validators.pattern(/^[一-龥A-Za-z0-9_^%;=?@$"]+$/)]),netid:new FormControl('', [Validators.required, Validators.pattern(/^[0-9]+$/) ]),}constructor(public dialogRef: MatDialogRef<NetWorkDialog>,@Inject(MAT_DIALOG_DATA) public data: DialogData,fb:FormBuilder,public dialog: MatDialog) {AddForm = fb.group({name:this.rules.name,netid:id,})}onNoClick(): void {this.dialogRef.close();}getErrorMessage() {if (this.rules.name.hasError('required')) {return '必须输入值';}if(this.rules.name.hasError('pattern')){return '请输入合法字符串'}}getNetIDErrorMessage(){if (id.hasError('required')) {return '必须输入值';}if(id.hasError('pattern')){return '必须输入数字'}}submit(e){if(!AddForm.invalid){this.dialogRef.close(this.newNet); }}}
调用dialog组件的父组件中
<button mat-raised-button (click)="openDialog()" color="primary">新增网络</button>
import {NetWorkDialog } from '../dialogs/network-ponent';import {network } from '../function.models';export class NetworkComponent implements OnInit {newNet: network = {netid: null,name: null,};openDialog(): void {const dialogRef = this.dialog.open(NetWorkDialog, {width: '470px',data: {newNet:{name: this.newNet?.name,netid:this.newNet?.netid,}}});dialogRef.afterClosed().subscribe(result => {console.log('The dialog was closed',result);this.newNet = result;});}
表单验证及弹窗自动关闭问题分别有参考链接
/q/51686251
https://pdf-/Home/Details/12304
