I want my modal to open only after validates the form angular? Appreciate your answer-CodePudding

When I click on save, I want my form to be validated then pop up should open.? But now when i click on save pop up is opening, after closing pop up, it is showing validation. I tried, but didn't work

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

modal:

<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;
  }
}

CodePudding user response：

Move validation inside dovalidation method. Add button which will open model after validation is complete

<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>

And after the successful validation done by dovalidation method open model by

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