Angular如何实现表单验证通过后再打开modal弹窗

问题原因 #

你当前的逻辑顺序完全颠倒了：保存按钮直接绑定了Bootstrap的data-toggle="modal" data-target="#saveCerts"属性，点击按钮时会直接触发弹窗打开，而你写的所有表单校验逻辑都放在了弹窗内部的OK按钮点击事件uploadCerts()中，只有点击弹窗的OK按钮才会执行校验，所以才会出现弹窗先弹出，关闭后才显示校验提示的问题。

解决步骤 #

1. 修改保存按钮配置 #

移除按钮上直接绑定的Bootstrap模态框触发属性，新增自定义点击事件用于先执行校验：

<button class="btn btn-primary py-2 px-3 mt-3" type="button" (click)="checkFormBeforeOpenModal()">Save</button>

2. 调整TS代码逻辑 #

把所有校验逻辑从uploadCerts()中移到新增的前置校验方法中，校验全部通过后再手动打开模态框。
如果你的项目使用ng-bootstrap管理模态框，参考代码如下：

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

constructor(
  private modalService: NgbModal,
  private sharedService: SharedService
) {}

// 新增前置校验方法
checkFormBeforeOpenModal() {
  // 原有全部校验逻辑移到此处
  if (this.labelvalue == null || this.labelvalue == '') {
    this.nolabel = true;
    return;
  }
  const format = /[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
  if(format.test(this.labelvalue)){
    this.noSpecialChar = true;
    return;
  }
  const ind = this.sslfileDetails.filter(x => x.label == this.labelvalue)
  if(ind.length > 0){
    this.sharedService.errorAlert("Label already taken")
    return
  }
  if(this.rootdata == undefined && this.certdata == undefined){
    if(this.combidata == undefined){
      this.sharedService.errorAlert("请上传.crt和.key证书，或者合并格式的证书")
      return;
    }
  }else if(this.rootdata != undefined){
    if(this.certdata == undefined){
      this.sharedService.errorAlert("请上传.crt和.key证书，或者合并格式的证书")
      return;
    }
  }else if(this.certdata != undefined){
    if(this.rootdata == undefined){
      this.sharedService.errorAlert("请上传.crt和.key证书，或者合并格式的证书")
      return;
    }
  }

  // 所有校验通过，手动打开模态框
  this.modalService.open('saveCerts');
}

// 原有uploadCerts仅保留校验通过后的提交逻辑
uploadCerts(){
  // 此处写提交数据、调用接口等后续业务逻辑
}

如果你使用原生Bootstrap管理模态框，可以通过模板引用手动触发弹窗打开：
首先给模态框新增模板引用：

<div class="modal fade modal-mini modal-primary" #saveCerts id="saveCerts" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

然后在TS中获取引用，校验通过后触发弹窗：

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

@ViewChild('saveCerts') saveModal: ElementRef;

checkFormBeforeOpenModal() {
  // 上述校验逻辑不变...

  // 校验通过后打开弹窗
  $(this.saveModal.nativeElement).modal('show');
}

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