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

Question

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

Maybe you should create a form using
and just keep button disabled as long as form is not valid. Doing it like that modal can't be opened nor form can be submitted. — Chaka15, Oct 06 '21 at 13:44
Okay, thanks for the reply, I will try this and will let you. — Mercy, Oct 06 '21 at 13:49
Your save button `data-toggle="modal" data-target="#saveCerts"` has got attributes to open model. You should open model iusing code — navnath, Oct 06 '21 at 13:50
Check this may help to open model after validation https://stackoverflow.com/questions/35400811/how-to-use-code-to-open-a-modal-in-angular-2 — navnath, Oct 06 '21 at 14:02

score 1 · Accepted Answer · answered Oct 08 '21 at 09:21

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();

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

1 Answers1