提交按钮未触发模式

Question

The submit button should fire the 'check' function and also fire the bootstrap modal. But the later is not happening. It works when I change the html to type="button". Isn't it possible to fire the bootstrap modal with a submit button?

<form [formGroup]="guessForm" (ngSubmit)="check($event)" class="form-group">
    <input type="number" formControlName="answer" class="form-control">
    <button type="submit" [disabled]="!guessForm.valid" data-toggle="modal" [attr.data-target]="myModal" class="btn btn-success">Check</button>
</form>

Answer 1

This happens because a submit button refreshes the page by default. Try to prevent it whith the following line of code.
$event.preventDefault();
Add this as first line in your check method. It should work then.

Answer 2

At first you need to make a event than control submit button and fire modal as like below. I call it with jquery but you use your desired framework.

<input type="submit" value="submit" onclick = "foo();"/>
<script>
    function foo(){
      $('#yourModalId').modal('show'); 
    }
</script>

For angular JS you may follow this link : http://plnkr.co/edit/wfv8P2T1ENg6XkjruzEq?p=preview