我希望我的模态仅在验证表单角度后打开？欣赏你的回答答案

【问题标题】：I want my modal to open only after validates the form angular? Appreciate your answer我希望我的模态仅在验证表单角度后打开？欣赏你的回答
【发布时间】：2021-10-06 13:40:18
【问题描述】：

当我点击保存时，我希望我的表单被验证然后弹出应该打开。？但是现在当我点击保存弹出窗口正在打开，关闭弹出窗口后，它显示验证。我试过了，还是不行

<button class="btn btn-primary py-2 px-3 mt-3" type="submit" data-toggle="modal" data-target="#saveCerts">Save</button>

模态：

<div class="modal fade modal-mini modal-primary" id="saveCerts" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-small">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title pull-left text-white">Alert</h4>
                <button mat-button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="material-icons">clear</i></button>
            </div>
            <div class="modal-body">
                <p>Make sure you are providing your finalized label name. You cannot change it in future once you start using it in your projects. </p>
            </div>
            <div class="modal-footer justify-content-center">
                <button mat-raised-button type="button" data-dismiss="modal" class="btn btn-primary px-3 -y-2" (click)="uploadCerts()">OK
          
        </button>
            </div>
        </div>
    </div>
</div>

ts：

uploadCerts(){
  
  if (this.labelvalue == null || this.labelvalue == '') {
    this.nolabel = true;
    return;
}
let 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("Please upload either .crt and .key certificates or Combined certificate")
    return;
  }
}else if(this.rootdata != undefined){
  if(this.certdata == undefined){
    this.sharedService.errorAlert("Please upload either .crt and .key certificates or Combined certificate")
    return;
  }
}else if(this.certdata != undefined){
  if(this.rootdata == undefined){
    this.sharedService.errorAlert("Please upload either .crt and .key certificates or Combined certificate")
    return;
  }
}

【问题讨论】：

也许您应该使用
创建一个表单，只要表单无效，就让按钮保持禁用状态。这样做是不能打开模态，也不能提交表单。
好的，谢谢你的回复，我会试试这个，让你。
您的保存按钮data-toggle="modal" data-target="#saveCerts" 具有打开模型的属性。您应该使用代码打开模型
谢谢navnath的回复，我试试
检查这可能有助于验证后打开模型stackoverflow.com/questions/35400811/…

标签： angular validation popup

【解决方案1】：

在dovalidation 方法中移动验证。添加验证完成后打开模型的按钮

<button [hidden]="true" id="openModalButton" type="button" data-toggle="modal" data-target="#saveCerts"></button>

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

并在通过dovalidation方法成功验证后打开模型

document.getElementById("openModalButton").click();

【讨论】：