如何关闭Angular 5表单模态框？点击按钮关闭时无法提交数据

我完全懂你的痛点——Bootstrap自带的data-bs-dismiss确实只能单纯关闭模态框，没法触发数据提交的逻辑。咱们可以把提交数据和关闭模态框的逻辑整合到同一个自定义点击事件里，这样就能同时完成两个操作了，具体实现步骤如下：

第一步：修改HTML模板，替换按钮的触发逻辑 #

首先给模态框添加一个模板引用变量（比如#submitModal），然后把提交按钮的data-bs-dismiss属性去掉，换成自定义的点击事件（比如(click)="handleSubmitAndClose()"）。示例代码如下：

<!-- 模态框容器 -->
<div class="modal fade" #submitModal tabindex="-1" aria-labelledby="submitModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="submitModalLabel">提交表单</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 你的表单内容，比如绑定表单数据 -->
        <input type="text" [(ngModel)]="formData.username" placeholder="请输入用户名">
        <input type="email" [(ngModel)]="formData.email" placeholder="请输入邮箱">
      </div>
      <div class="modal-footer">
        <!-- 自定义提交按钮 -->
        <button type="button" class="btn btn-primary" (click)="handleSubmitAndClose()">提交并关闭</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
      </div>
    </div>
  </div>
</div>

第二步：在main.component.ts中实现逻辑 #

在组件类里，我们需要先获取模态框的实例，然后在自定义方法里先处理数据提交（比如调用接口、保存数据），再手动关闭模态框。示例代码如下：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { Modal } from 'bootstrap'; // 确保已安装Bootstrap并导入

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements AfterViewInit {
  // 表单数据绑定
  formData = { username: '', email: '' };
  // 通过ViewChild获取模态框元素
  @ViewChild('submitModal') modalElement!: ElementRef;
  // 模态框实例
  private modalInstance!: Modal;

  ngAfterViewInit() {
    // 初始化模态框实例
    this.modalInstance = new Modal(this.modalElement.nativeElement);
  }

  handleSubmitAndClose() {
    // 1. 先处理数据提交逻辑
    console.log('要提交的数据:', this.formData);
    // 这里可以替换成实际的API调用，比如：
    // this.apiService.submitForm(this.formData).subscribe({
    //   next: (res) => {
    //     console.log('提交成功:', res);
    //   },
    //   error: (err) => {
    //     console.error('提交失败:', err);
    //   }
    // });

    // 2. 提交完成后关闭模态框
    this.modalInstance.hide();

    // 可选：重置表单数据
    this.formData = { username: '', email: '' };
  }
}

补充说明（如果用ng-bootstrap组件库） #

如果你的项目用的是Angular专属的ng-bootstrap库，逻辑类似，只是获取模态框实例的方式不同：

1. 用NgbModal服务打开模态框并保存实例
2. 提交完成后调用modalRef.close()即可关闭

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