Angular10项目Bootstrap模态框表单提交成功后无法自动关闭求助

核心问题分析 #

你的closePopUp()函数仅完成了表单重置和状态清理，但没有调用模态框的关闭方法，这是模态框无法关闭的直接原因。根据你使用的Bootstrap类型（原生Bootstrap/ng-bootstrap），以下分场景给出解决办法：

场景1：使用原生Bootstrap（依赖jQuery） #

1. 模板中添加模态框引用标记
   在模态框的根容器上添加模板引用变量，示例：

<div class="modal fade" #targetModal tabindex="-1" role="dialog">
  <!-- 模态框内部内容 -->
</div>

2. 组件中获取实例并触发关闭
   通过@ViewChild获取模态框DOM元素，调用Bootstrap原生的关闭方法：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent {
  @ViewChild('targetModal') targetModal: ElementRef;

  // ...其他业务代码

  closePopUp() {
    this.submitted = false;
    this.referrersForm.reset();
    this.ReferrerPoliciesForm.reset();
    this.addContactDetailForm.reset();
    this.addNoteModalForm.reset();
    this.editMode = false;
    this.selectedFiles = [];
    this.renderFileList();
    
    // 新增：调用Bootstrap模态框关闭方法
    $(this.targetModal.nativeElement).modal('hide');
  }
}

注意：需确保项目已正确引入jQuery和Bootstrap的JS文件。

场景2：使用ng-bootstrap（Angular官方适配组件） #

1. 打开模态框时保存实例引用
   调用NgbModal.open()时，将返回的NgbModalRef实例存储下来：

import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';

export class YourComponent {
  private modalRef: NgbModalRef;

  constructor(private modalService: NgbModal) {}

  // 打开模态框的方法
  openModal(contentTemplate) {
    this.modalRef = this.modalService.open(contentTemplate);
  }

  // ...其他业务代码

  closePopUp() {
    this.submitted = false;
    this.referrersForm.reset();
    this.ReferrerPoliciesForm.reset();
    this.addContactDetailForm.reset();
    this.addNoteModalForm.reset();
    this.editMode = false;
    this.selectedFiles = [];
    this.renderFileList();
    
    // 新增：关闭模态框
    if (this.modalRef) {
      this.modalRef.close();
      // 若需触发取消类场景，可改用dismiss()：this.modalRef.dismiss();
    }
  }
}

额外排查点 #

• 检查模态框HTML结构是否符合Bootstrap规范，确保包含.modal、.modal-dialog、.modal-content等必要类。
• 因提交按钮在<form>外部，确认表单提交时未触发页面默认刷新（可在提交方法中添加event.preventDefault()阻止默认行为）。

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