How to close the modal window by pressing the input login?

Question

It is necessary that after selecting the login button the dialog box should be closed. I have all the time there are some bugs. For example, when you click the Login button, the dialog box closes but everything becomes dark.

Who knows how to solve such a problem, help.

HTML:

<div class="main-content">
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
    Authentication
</button>
<button type="submit" class="btn btn-danger pull-right" (click)="logOut()">Close</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Login</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form (ngSubmit)="onSignInSubmit()" #f="ngForm" >

                    <div class="row">

                      <div class="form-group form-black label-floating is-empty">
                        <input id="email"
                               type="email"
                               required
                               name='email'
                               [(ngModel)]="signInUser.email" class="form-control">

                        <label class="control-label" for="email">Email</label>
                      </div>


                      <div class="form-group form-black label-floating is-empty">
                        <input id="password"
                               type="password"
                               required
                               name='password'
                               [(ngModel)]="signInUser.password"
                               class="form-control">

                        <label class="control-label" for="password">Password</label>
                      </div>


                    </div>

                  </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit"
                [disabled]="!(f.valid)"
                [ngClass]="{'disabled': !(f.valid)}"
                class="btn btn-danger">Login </button>
            </div>
        </div>
    </div>
</div>

Typescript:

export class InfoComponent implements OnInit {

  signInUser = {
    email: '',
    password: ''
  };

  @Output() onFormResult = new EventEmitter<any>();

  constructor(protected authService:AuthService, private router:Router) { }

  ngOnInit() {
  }

  logOut(){
    this.authService.logOutUser().subscribe(() => this.router.navigate(['/info']));
  }

  onSignInSubmit(){

    this.authService.logInUser(this.signInUser).subscribe(

        res => {
          if(res.status == 200){
            // loginForm.resetForm();
            this.onFormResult.emit({signedIn: true, res});
            this.router.navigate(['/profile']);          }
        },

        err => {
          console.log('err:', err);
          // loginForm.resetForm();
          this.onFormResult.emit({signedIn: false, err});
        }) 
  }  
}

P.S. I apologize for my bad english.

Answer 1

Assuming you have already included jquery.

on the top

declare $ :any;

---

   onSignInSubmit(){
    $('#exampleModal').modal('hide'); ....

---

I hope this helps. Feel free to comment.