在Angular2表单提交上传递数据和触发模式

Question

我有一个带有表格的模态：

<div class="modal-content">
    <div class="modal-body">
        <form (ngSubmit)="onSubmit(f)" #f="ngForm">
            <div class="form-group">
                <label>Full Name</label>
                <input type="name" class="form-control" id="fullname" placeholder="Enter full name" name="fullname" ngModel required>
            </div>
             <button [disabled]="!f.valid" type="submit" class="btn btn-success" data-toggle="modal" data-target="#anotherModal" data-dismiss="modal">
            Confirm
          </button>
        </form>
    </div>
</div>

单击按钮时，将触发成功模式：

<div id="bookedModal" class="modal fade" role="dialog">
  <div class="modal-content" id="bookedModalCorners">
    <div class="modal-body">
      <p style="text-align: center">Registration successful!</p>
    </div>
  </div>
</div>

我试图通过mySubmit方法将表单中收集的数据发送到父组件：

  onSubmit(){
    this.details = this.submittedForm.value;
    this.messageEvent.emit(this.details);
  }

但是由于第一个模态/形式触发了第二个模态，onSubmit方法并未生效。如果我删除第二个模态触发器，onSubmit工作正常。我怎么能绕过这个？