如何在Angular2中的表单提交事件后关闭模式？

Question

我想在表单提交事件完成后关闭模式。我做了以下事情：

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

这会在表单提交时触发 save()，但不会关闭模式，因为我在保存按钮上尝试了 data-dismiss="modal"，这会阻止 save() 调用并关闭模式。 我想在关闭模式之后先完成 save()。

Answer 1

假设表单在 bootstrap modal 内，您可以使用 $('#modalID').modal("hide") 关闭模态框。

完整参考请查看here。

Answer 2

或者，在保存调用成功后，您可以通过“关闭”按钮关闭模式。

<button #btnId type="submit" />

你的组件可以通过 this.btnId.click() 关闭