How can I stop popup modal from closing when user is invalid in angular8?

Question

I am trying to add a valid user in the existing table with the help of bootstrap popup modal, but when I try to add an invalid user it is getting added and popup is getting closed. I want to stop that popup from closing when I add invalid user and close when valid user get added.

My HTML code:

    <div class="wrapper-editor">
         <div class="row d-flex justify-content-center modalWrapper">
           <div class="modal fade addNewInputs" id="modalAdd"   tabindex="-1" role="dialog" aria- 
               labelledby="modalAdd" aria-hidden="true">
      <div class="modal-dialog"  role="document">
        <div class="modal-content">
          <div class="modal-header text-center">
            <h4 class="modal-title w-100 font-weight-bold text-primary ml-5">Add new user</h4>
            <div class="close text-primary" data-dismiss="modal" aria-label="Close">
              <i class="fa fa-times" aria-hidden="true"></i>
            </div>
          </div>
          <form [formGroup]="userForm" (ngSubmit)="addNewuser(userForm)">
            <div class="modal-body mx-3">
              <div class="md-form mb-5">
                <div class="form-group">
                  <label for="name" class=" font-weight-bold self-contrl-lbl">
                    <i class="fa fa-user adjust-icon"></i>Name
                  </label>
                  <input type="text" id="inputName" formControlName="name" class="form-control"
                    [ngClass]="{ 'is-invalid':submitted && f.name.errors }" id="newAttributeName"
                    [(ngModel)]="newAttribute.name" name="newAttributeName" id="name" ngModel name="name" />
                  <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
                    <div *ngIf="f.name.errors.required"> Name is required</div>
                  </div>
                </div>
              </div>
              <div class="md-form mb-5">
                <div class="form-group">
                  <label for="Email" class="self-contrl-lbl font-weight-bold">
                    <i class="fa fa-envelope adjust-icon"></i> Email id
                  </label>
                  <input type="text" id="inputEmail" formControlName="email" class="form-control"
                    [ngClass]="{ 'is-invalid': submitted && f.email.errors }" id="newAttributeEmail"
                    [(ngModel)]="newAttribute.email" name="newAttributeEmail" id="email" />
                  <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
                    <div *ngIf="f.email.errors.required">Email is required</div>
                    <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
                  </div>
                </div>
              </div>
            </div>
          </form>

             <div class="modal-footer d-flex justify-content-center">           
                <button (click)="addNewuser(userForm)" type="button" id="user-btn" class="btn btn-block 
                 buttonAdd" #closeBtn>Add user
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="float-right">
      <a href="" class="btn btn-info btn-rounded btn-sm " data-toggle="modal" data-target="#modalAdd"><i
       class="fa fa-plus"></i>Add</a>
    </div>

My TS file:

     addNewuser() {
      this.submitted= true;
      this.closeModal();
      this.newAttribute.id=this.lstcomments.length+1;
      this.lstcomments.push(this.newAttribute)
      this.newAttribute = {};

       if (this.userForm.invalid) {       
            return;
       }
     }

     private closeModal(): void {
        this.closeBtn.nativeElement.click();
     }

This is all I tried ,please help me out. Thanks in advance...