Angular 4：表单提交事件完成后关闭模式

Question

我正在使用 bootstrap 4 modal.when 我按下关闭按钮 modal 正确关闭。但我想在提交表单中存在的创建按钮后关闭模式。我正在使用角度 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>

Answer 1

如果你想从组件中关闭模态，那么你可以使用

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

否则，您可以将提交按钮的类型从“提交”更改为按钮并按如下方式使用

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

这将关闭您的模式并同时调用您的提交函数。