如何在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()，但不会在保存按钮上关闭我尝试过的模式，这会阻止save()调用并关闭模式。在关闭模式之后，我想先完成save()。

Answer 1

假设表单位于引导模式中，您可以使用$('#modalID').modal("hide")关闭该模式。

有关完整的参考资料，请查看here。

Answer 2

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

<button #btnId type="submit" />

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