How to validate and close bootstrap 3 modal form in Angular 5?

Question

I have few text inputs which I need to validate in a bootstrap 3 modal form and I am using Angular 5. I want to close the modal form only if all validations are successful. It should remain as it is if validations fail, on click of a button.

Plnkr: https://plnkr.co/edit/VgLArC3RkKMgXOhAPGei?p=preview

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>On click of validate, this modal form should not get closed if text input is empty. It should get closed only if text input is not empty.</p>
        <input type="text">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Validate</button>
      </div>
    </div>

  </div>
</div>

I want to know how can we avoid closing of modal form from Angular using typescript. Appreciate your help.

Answer 1

You should save a reference to opened modal and use the reference to close the modal. NgbModalRef as described in documentation: [ https://ng-bootstrap.github.io/#/components/modal/api][1]

<ng-template #content let-d="dismiss">
  <div class="modal-header">
    <button type="button" class="close" aria-label="Close"  (click)="dismiss()">
      <span aria-hidden="true">&times;</span>
    </button>

.....

import  NgbModal, NgbModalRef

public modelRef: NgbModalRef

openLg(content) {
   this.modelRef =  this.modalService.open(content);
  }

 dismiss() {
    this.modelRef.close();
  }

.....

Answer 2

You can simpy use $('#myModal').modal('hide');

whenever you want to hide modal. I have updated the code it will check if an input value is there if it is there then only it will close.

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {ViewChild, ElementRef} from '@angular/core';


@Component({
  selector: 'my-app',
  template: `
   <!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>On click of validate, this modal form should not get closed if text input is empty. It should get closed only if text input is not empty.</p>
        <input type="text" #textValue>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="textvalue(textValue.value)">Validate</button>
      </div>
    </div>

  </div>
</div>
  `,
})
export class App {

textvalue(value){
  if(value !== ''){
    $('#myModal').modal('hide');

  }else{
    console.log("please enter value");
  }

}

  name:string;
  textValuebol : false;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }


}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Hope this helps.