Schaltfläche "Senden" löst kein Modal aus

Question

Die Schaltfläche "Senden" sollte die "Check" -Funktion auslösen und auch das Bootstrap-Modal auslösen. Aber das Spätere passiert nicht. Es funktioniert, wenn ich den HTML zu type = "Knopf" ändere. Ist es nicht möglich, das Bootstrap-Modal mit einem Submit-Button auszulösen?

<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

Dies geschieht, weil eine submit Schaltfläche die Seite standardmäßig aktualisiert. Versuchen Sie, es mit der folgenden Codezeile zu verhindern.
$event.preventDefault();
Fügen Sie dies als erste Zeile in Ihre Prüfmethode ein. Es sollte dann funktionieren.

Answer 2

Zuerst müssen Sie ein Ereignis als Steuerelement Schaltfläche "Senden" und feuern modal wie unten setzen. Ich rufe es mit jQuery, aber Sie verwenden Ihr gewünschtes Framework.

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

Für Winkel JS Sie diesem Link folgen können: http://plnkr.co/edit/wfv8P2T1ENg6XkjruzEq?p=preview