This is a component I have created:
@Component({
selector: 'login-view',
templateUrl: 'app/login/login.component.html',
directives: [MATERIAL_DIRECTIVES, FORM_DIRECTIVES]
})
export class LoginComponent implements OnInit{
loginForm: ControlGroup;
constructor(
private _formBuilder: FormBuilder, private _router: Router) {
}
ngOnInit() {
// some initialization
}
submitLoginForm(){
// implementation pending
}
goToRegister(){
this._router.navigate(['/Register']);
}
goToResetPassword(){
this._router.navigate(['/ResetPassword']);
}
}
This is the template for the component above:
<form [ngFormModel]="loginForm" (ngSubmit)="submitLoginForm()">
<input md-input ngControl="mobileNumber" type="number" id="mobileNumber">
<input md-input type="password" ngControl="password" id="password"/>
<button md-raised-button type="submit" class="md-raised md-primary">Login</button>
<div>
// These Work
<a md-button class="md-primary" (click)="goToResetPassword()">Forgot password?</a>
<a md-button class="md-primary" (click)="goToRegister()">New here? Register</a>
//These don't work, reloads the app
<button md-button class="md-primary" (click)="goToResetPassword()">Forgot password?</button>
<button md-button class="md-primary" (click)="goToRegister()">New here? Register</button>
</div>
</form>
When calling goToResetPassword() or goToRegister() from the (click) event of <a>, it works correctly.
However, if I change the html element to <button>, it simply reloads the entire app without displaying any errors in the console.