Angular+Bootstrap实现表单提交后模态框展示提交数据

实现逻辑 #

提交表单时拦截默认刷新行为，将表单输入值绑定到组件类属性暂存，调用Bootstrap模态框实例触发弹窗，模态框内直接绑定暂存的属性值完成展示，常规场景无需额外持久化存储。

1. 改造组件模板（HTML文件） #

给原有表单添加Angular表单绑定规则，补充Bootstrap模态框结构，代码如下：

<!-- 表单区域：绑定提交事件、添加模板引用，所有表单控件配置name属性与ngModel -->
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm.value)">
  <input 
    type="text" 
    placeholder="Name" 
    name="userName" 
    ngModel
    required
  />

  <select aria-label="Default select city" name="city" ngModel required>
    <option value="" disabled selected>Open this select menu</option>
    <option value="1">London</option>
    <option value="2">Paris</option>
    <option value="3">NYC</option>
  </select>
  <button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

<!-- Bootstrap模态框区域：添加模板引用方便调用 -->
<div class="modal fade" #resultModal tabindex="-1" aria-labelledby="resultModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="resultModalLabel">表单提交结果</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>姓名：{{ submittedForm?.userName }}</p>
        <p>所选城市：{{ cityMap[submittedForm?.city] || '未选择' }}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

注意：

• 下拉框默认选项设置为空值并加disabled，配合必填校验避免提交无效数据
• 使用模板驱动表单需要在对应模块中导入FormsModule，否则ngModel绑定无法生效

2. 编写组件类逻辑（TS文件） #

在组件类中声明存储表单数据的属性、获取模态框实例，实现提交处理方法：

import { Component, ViewChild } from '@angular/core';
import { Modal } from 'bootstrap';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-form-page',
  templateUrl: './form-page.component.html',
  styleUrls: ['./form-page.component.css']
})
export class FormPageComponent {
  // 获取模板中的模态框DOM元素
  @ViewChild('resultModal') resultModalEl: any;
  // 暂存提交的表单数据
  submittedForm: { userName: string; city: string } | null = null;
  // 城市值与显示文本的映射
  cityMap: Record<string, string> = {
    '1': 'London',
    '2': 'Paris',
    '3': 'NYC'
  };
  private modalIns: Modal | null = null;

  ngAfterViewInit(): void {
    // 初始化Bootstrap模态框实例
    this.modalIns = new Modal(this.resultModalEl.nativeElement);
  }

  onSubmit(formVal: { userName: string; city: string }): void {
    // 存储提交的表单数据
    this.submittedForm = formVal;
    // 唤起模态框
    this.modalIns?.show();
  }
}

3. 依赖配置说明 #

• 若使用原生Bootstrap：先执行npm install bootstrap安装依赖，在angular.json配置文件的styles数组中引入bootstrap的CSS文件路径，scripts数组中引入node_modules/bootstrap/dist/js/bootstrap.bundle.min.js路径即可。
• 若使用@ng-bootstrap/ng-bootstrap组件库：无需单独引入Bootstrap的JS文件，将模态框初始化、唤起的逻辑替换为ng-bootstrap对应的API即可，表单绑定、数据存储的逻辑完全一致。
• 若需要页面刷新后仍保留提交数据，在onSubmit方法中添加localStorage.setItem('lastSubmit', JSON.stringify(formVal))将数据存入本地存储，组件初始化时读取对应值赋值给submittedForm即可。

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