CODEWITHSUNDEEP
angularbootstrap-modalbootstrap-4
K.MohanRaj
K.MohanRaj

Reputation: 89

Angular 4: Close modal after form submit event is finished

i am using bootstrap 4 modal.when i press the close button modal closes properly. but i want to close the modal after submitting the create button present in the form. i am using angular 4.

<div class="modal fade" id="createLabel" 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">New project</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 name="form"  (ngSubmit)="f.form.valid && newproject(createLabel)" #f="ngForm" novalidate >
      <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !projectname.valid }">
            <input type="text" class="form-control" placeholder="Your Project Title. Eg. Building Ark v1.0" name="projectname"  [(ngModel)]="createLabel.projectname"  minlength="3" #projectname="ngModel" required />
            <div *ngIf="f.submitted && !projectname.valid" class="help-block" style="color: red;">Atleast 3 charater</div>
            </div>
            <div class="form-group" >
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button [disabled]="loading" class="btn btn-primary" >Create</button> </div>
        </form>
  </div>

 </div>
</div>

Upvotes: 5

Views: 38470

Answers (7)

Raghu Balan
Raghu Balan

Reputation: 11

you can close modal on inside the ngSubmit function in .ts file

.ts File

(Submitfunction){   //function of modal submit button

    $('#mymodalname').modal('hide');

}

Upvotes: 0

SAAD BELEFQIH
SAAD BELEFQIH

Reputation: 372

in your case the simplest and most reliable method at the same time :

    <div class="modal fade" id="createLabel" 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">New project</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 name="form" #f="ngForm" novalidate >
          <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !projectname.valid }">
                <input type="text" class="form-control" placeholder="Your Project Title. Eg. Building Ark v1.0" name="projectname"  [(ngModel)]="createLabel.projectname"  minlength="3" #projectname="ngModel" required />
                <div *ngIf="f.submitted && !projectname.valid" class="help-block" style="color: red;">Atleast 3 charater</div>
                </div>
                <div class="form-group" >
                   <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button [disabled]="!f.form.valid" (click)="newproject(createLabel)" 
                       data-dismiss="modal" type="button" class="btn btn-primary" >Create</button> </div>
            </form>
      </div>
    
     </div>
    </div>

Upvotes: 0

abubakkar tahir
abubakkar tahir

Reputation: 847

the easy way to close popup modal on submit is this

<a class="confirm" data-dismiss="modal" (click)="save()">Confirm</a>

Upvotes: 3

Srikrushna
Srikrushna

Reputation: 4945

In angular use jQuery instead of $ because you can easily identify 

declare var jQuery:any;

For close write the below line in your component

jQuery("#myModal").modal("hide");

Or 

  jQuery('#addEditUserModal').modal('toggle');

Upvotes: -1

mlangwell
mlangwell

Reputation: 345

It looks like to me you have a couple of options here.

1.) Add the data-dismiss to your Create button as well.

2.) You can use @ViewChild from @angular/core and JQuery to get reference to the modal and then on click of Create you can close it.

For the second option you will have to import JQuery into your project, whatever that means for you. Then you can use ViewChild with JQuery like this:

@ViewChild('completeModal') completeModal: ElementRef;
$(this.completeModal.nativeElement).modal('hide');

Upvotes: 2

StefanN
StefanN

Reputation: 911

You don't have to use jQuery or other external libraries when you're using Angular. All you need is an EventEmitter that emits an event when the form is submitted.

Look at this code sample I made:

First the code for the modal

modal.component.html

<div>
   <h1>This is my modal</h1>
   <button (click)="onCloseModal($event)">Submit form</button>
</div>

modal.component.ts

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent {
  @Output() closeModalEvent = new EventEmitter<boolean>();

  constructor() { }

  onCloseModal(event: any){
   this.closeModalEvent.emit(false);  
  }
}

Now the code for the parent

parent.component.html

<div>
  <app-modal [modalVisible]="isVisible" (closeModalEvent)="onClose($event)"></app-modal>
  <button (click)="showModal()">open modal</button>
</div>

parent.component.ts

@Component({
      selector: 'app-parent',
      templateUrl: './parent.component.html',
      styleUrls: ['./parent.component.scss']
    })
    export class ModalComponent {
      modalVisible = false;

      constructor() { }

      onClose(isVisible: boolean){
       this.modalVisible = isVisible;
      }

      showModal(){
       this.modalVisible = true;
     }
    }

Upvotes: 4

Gautam
Gautam

Reputation: 1056

If you want to close modal from component then you can use 

$("#createLabel").modal("hide");

Else you can change the type of sumbit button from 'submit' to button and use as follows

<button type="button" (click)='onsubmit()' data-dismiss="createLabel">Create</button>

this will close your modal and call you submit function at the same time.

Upvotes: 4

Related Questions