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>

回答1:

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

回答2:

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

回答3:

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.

回答4:

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

来源：https://stackoverflow.com/questions/47095010/angular-4-close-modal-after-form-submit-event-is-finished