Angular 5提交表单后模态框未关闭？问题排查及关闭方法

嘿，我来帮你搞定这个问题！你现在的代码只实现了打开对话框的功能，但缺少表单提交后触发关闭对话框的逻辑，具体问题和解决方法如下：

问题分析 #

你在openMod()方法里创建了对话框引用dialogRef，但这个引用只存在于方法内部，子组件FeedbackFormComponent无法直接访问它；同时你也没有在表单提交的逻辑里添加关闭对话框的代码，所以点击SUBMIT按钮后对话框不会自动关闭。

解决方案（基于Angular Material对话框） #

下面提供两种常用的解决方式，你可以根据需求选择：

方式一：子组件直接关闭对话框 #

如果表单提交逻辑在子组件里完成，不需要父组件额外处理，可以直接在子组件中注入对话框引用并调用关闭方法：

1. 在FeedbackFormComponent中导入并注入MatDialogRef：

import { MatDialogRef } from '@angular/material/dialog';

constructor(private dialogRef: MatDialogRef<FeedbackFormComponent>) { }

2. 在表单提交方法中添加关闭逻辑：

// 假设你的表单提交方法叫onSubmit
onSubmit() {
  // 先执行你的表单提交逻辑，比如发送API请求、验证表单等
  console.log('表单已提交');

  // 提交完成后关闭对话框
  this.dialogRef.close();
}

3. 确保模板中的提交按钮绑定了提交事件：

<form (ngSubmit)="onSubmit()">
  <!-- 表单内容 -->
  <button type="submit">SUBMIT</button>
</form>

方式二：通过事件通知父组件关闭 #

如果需要父组件处理完表单数据后再关闭对话框（比如在父组件保存数据），可以用组件间通信的方式：

1. 在FeedbackFormComponent中定义输出事件：

import { Output, EventEmitter } from '@angular/core';

// 定义输出事件，可传递表单数据
@Output() formSubmitted = new EventEmitter<any>();

onSubmit() {
  // 获取表单数据
  const formData = this.yourForm.value; // 替换成你的表单实例

  // 触发事件，把数据传给父组件
  this.formSubmitted.emit(formData);
}

2. 在父组件的openMod()方法中订阅事件并关闭对话框：

openMod(): void { 
  const dialogRef = this.dialog.open(FeedbackFormComponent, { width: '800px' });

  // 订阅子组件的提交事件
  dialogRef.componentInstance.formSubmitted.subscribe((formData) => {
    // 父组件处理表单数据的逻辑，比如保存到数据库
    console.log('收到子组件的表单数据:', formData);

    // 处理完成后关闭对话框
    dialogRef.close();
  });
}

这样修改后，点击SUBMIT按钮提交表单，对话框就会自动关闭啦！

内容的提问来源于stack exchange，提问作者Wasif