プロパティが更新されるとAngular2ページがリフレッシュされます

Question

私はAngular2の新機能で、ページがリフレッシュされた理由を理解してから、フォームデータからいくつかのプロパティを設定しようとしました。ここで

はコンポーネントです：

import { Component } from '@angular/core'; 
import { Credentials } from './authentication/Credentials'; 
import { User } from './authentication/User'; 

@Component({ 
    selector: 'loginForm', 
    templateUrl: 'app/shared/loginForm.component.html' 
}) 
export class LoginForm { 
    //user: User; 
    credentials: Credentials; 

    submitForm(form: any): void { 

     this.credentials.username = form.username; 
     this.credentials.password = form.password; 

     console.log(form.username); 
    } 
} 

私はthis.credentials.usernameとthis.credentials.password行をコメントアウトした場合は、提出されたユーザ名がコンソールに記録されます。これらの行のコメントを外すと（上記と同様に）、ページは完全に再描画されます（リフレッシュ）。

EDIT：

私は本当にここにやろうとしています何をリフレッシュせずにユーザーを認証することができるようです。 ...ボタンのイベントをクリックする）（submitFormを結合することによって、それを確認してください

<form #form="ngForm" class="navbar-form navbar-right" (ngSubmit)="submitForm(form.value)"> 
    <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Username" name="username" ngModel required> 
     <input type="password" class="form-control" placeholder="Password" name="password" ngModel required> 
    </div> 
    <div class="form-group"> 
     <button type="submit" class="btn btn-default">Log in</button> 
    </div> 
</form> 

Answer 1

<button type="submit" class="btn btn-default" (click)="submitForm()">Log in</button> 

またフォーム

からngSubmitを削除します。ここではテンプレートも同様です