How to close modal after form submit event in Angular2?

Question

I want to close modal after form submit event is finished. I've done following things:

<form [formGroup]="alertForm" novalidate (ngSubmit)="save(alertForm.value, alertForm.valid)">
    <div class="row" style="padding-left: 20px; padding-right: 20px;">
      <div class="input-field">
        <div class="form-group input-field">
          <label for="recipientLogin">Available Recipient</label>
          <textarea class="form-control validate" id="recipientLogin" required formControlName="recipientLogin"> </textarea>
        </div>
      </div>

      <div class="input-field">
        <div class="form-group input-field">
          <select class="form-control" id="alert_level" formControlName="alert_level">
            <option  value="0" selected> Emergency </option>
            <option value="1">Major</option>
            <option value="2">Minor</option>
            <option value="3">Information</option>
          </select>
        </div>
      </div>

      <div class="input-field">
        <div class="form-group input-field">
          <label for="subject">Subject</label>
          <input type="text" class="form-control validate" id="subject" required formControlName="subject">
        </div>
      </div>

      <div class="input-field">
        <div class="form-group input-field">
          <label for="message">Message</label>
          <textarea class="form-control validate" id="message" required formControlName="message"> </textarea>
        </div>
      </div>

      <div class="input-field">
        <div class="form-group input-field">
          <input type="file" class="form-control" id="media1" />
          <input type="file" class="form-control" id="media2" />
          <input type="file" class="form-control" id="media3" />
        </div>
      </div>
    </div>

    <div>
      <div class="col s6">
        <div style="padding-left: 20px; padding-right: 20px;">
          <button type="submit" class="btn btn-default input-field">Send</button>
        </div>
      </div>
      <div class="col s6 right-align">
        <div style="padding-left: 20px; padding-right: 20px;">
          <button type="submit" data-dismiss="modal" class="btn btn-default input-field">Close</button>
        </div>
      </div>
    </div>
  </form>

This triggers save() on form submit but does not close the modal for that I tried data-dismiss="modal" on save button, which block the save() call and close the modal. I want to complete save() first after that close modal.

Possible duplicate of [How can I close a modal in Angular 2?](https://stackoverflow.com/questions/35354041/how-can-i-close-a-modal-in-angular-2) — developer033, Jul 07 '17 at 22:04
Possible duplicate of [Angular 2 ng-bootstrap close Modal](https://stackoverflow.com/questions/41937699/angular-2-ng-bootstrap-close-modal) — Antti A, Jun 26 '19 at 15:10
Possible duplicate of [Cannot close ng-bootstrap Modal](https://stackoverflow.com/questions/39435950/cannot-close-ng-bootstrap-modal) — Antti A, Jun 26 '19 at 15:13

score 0 · Answer 1 · answered Jul 06 '17 at 05:21

0

Assuming the form is inside a bootstrap modal, you can use $('#modalID').modal("hide") to close the modal.

For full reference check here.

answered Jul 06 '17 at 05:21

Ric K

648
1
6
16

I tried this as well, but as I'm using angular2, it's not recognizes $ command. – netfreak30 Jul 06 '17 at 06:02
the idea is same but you need refer modal in angular way. in your template refer your modal use template reference as - #modal and in your component add - @ViewChild('modal') modal : ElementRef; and then after save success add - this.modal.hide(); – Rahul Singh Jul 06 '17 at 06:05
if you can add plunkr link it will be easier for us to help u – Rahul Singh Jul 06 '17 at 06:14
I tried modal.hide(), it closes my both modal and I cannot access my webpage after that(I want to close second modal open thru first modal). In seconds modal's body i'm rendering form compoent which i've created. So modal is opened from another component and want to close this from different component. – netfreak30 Jul 06 '17 at 10:55

score 0 · Answer 2 · answered Jul 06 '17 at 05:39

0

Alternatively, on success of your save call you can close the modal via the 'Close' button.

<button #btnId type="submit" />

Which your component can close via this.btnId.click()

answered Jul 06 '17 at 05:39

alexhuang

506
1
3
12

I want two tasks on onClick of send button:1) call to save() 2) close modal – netfreak30 Jul 06 '17 at 06:03

How to close modal after form submit event in Angular2?

2 Answers2