Taste neu lädt meine Seite, auch wenn er nicht vorlegen ist

Question

Alpha: 44

Ich habe ein Problem zur Zeit mit der Taste in angular2 ...

sie scheint seltsames Verhalten zu haben, die nicht in existiert angular1 und sogar in jedem reinen HTML tut es nicht das seltsame Verhalten

jedes Mal, wenn ich auf meine Schaltfläche klicke, wird die Seite neu geladen ... es ist kein Submit-Button .. so sollte es nicht die Seite neu laden!

ein anderes Verhalten, das ziemlich frustrierend in angular2 ist, dass viele Fehler der Browser das Konsolenprotokoll erneut zu laden, und wir verlieren ...

hier ist der Code

createPlayer() { 
    let p = new PlayerModel('s', 1); 
    console.log(p); 
} 

<form> 
    <div class="form-group"> 
     <label for="name" class="control-label"> 
      Name: 
     </label> 

     <input type="text" id="name" class="form-control"/> 
    </div> 

    <div class="form-group"> 
     <label for="score" class="control-label"> 
      Score: 
     </label> 

     <input type="number" id="score" class="form-control"/> 
    </div> 

    <div class="form-group"> 
     <button (click)="createPlayer()" class="btn btn-default"> 
      Create a Player 
     </button> 
    </div> 
</form> 

gibt es keine Fehler Während ich den Prozess mit Debugger in der ersten Anweisung tun, aber wenn das Ende der Schaltfläche passieren, laden Sie die Seite neu ...

Answer 1

Sofern Sie nicht anders angeben, ist das Senden eines Formulars die Standard Verhalten von <button> s (ich weiß, oder?). Sie können dies vermeiden, indem Sie keine form enthalten, indem Sie type="button" hinzufügen oder indem Sie das Standardverhalten in createPlayer verhindern.

Answer 2

Für andere, die interessiert sein könnten: erstellen Sie Ihre Form wie folgt aus:

<form (ngSubmit)="onSubmit()" #feedback="ngForm"> 

Dann eine onSubmit() Funktion in Ihrer Komponente erstellen.

Für ein Beispiel gehen Sie zu angular.io und gehen Sie zu Grundlagen/Formulare im linken Menü, scrollen Sie nach unten und klicken Sie auf den Link "Live Demo".