Issue
below is my html and component code.
<div class="login-page" [@routerTransition]>
<div class="row justify-content-md-center">
<div class="col-md-4">
<img src="assets/images/logo.png" width="150px" class="user-avatar" />
<h1>Heath-Dashboard</h1>
<form role="form">
<div class="form-content">
<div class="form-group">
<input type="text" class="form-control input-underline input-lg" id="email" placeholder="enter email" ng-model="user.email" name="email" required>
</div>
<div class="form-group">
<input type="password" class="form-control input-underline input-lg" id="password" placeholder="enter password" ng-model="user.password" name="password" required>
</div>
</div>
<button class="btn rounded-btn" (click)="onLogin()"> Log in </button>
<a class="btn rounded-btn" [routerLink]="['/signup']">Register</a>
</form>
</div>
</div>
</div>
LoginComponent
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { routerTransition } from '../router.animations';
import { AuthService } from '../shared/services/auth.service';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { User } from '../shared/models/user';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
animations: [routerTransition()]
})
export class LoginComponent implements OnInit{
user: User = new User("","");
constructor(public router: Router,private auth: AuthService) {}
ngOnInit() {
// reset login status
this.auth.logout();
}
onLogin(): void {
debugger;
console.log(this.user.email);
this.auth.login(this.user)
.then((user) => {
localStorage.setItem('token', user.json().auth_token);
this.router.navigateByUrl('/dashboard');
})
.catch((err) => {
console.log(err);
});
}
onsubmit(): void{
debugger;
console.log(this.user.email);
}
}
When I tried to use submit form page gets refresh and reload again with email and password in url.
When I tried to use button click without submit I am not getting model values.
Please let me know if require more information.
Solution
Use this code , in angular 2 the selector is ngModel
not ng-model
<div class="login-page" [@routerTransition]>
<div class="row justify-content-md-center">
<div class="col-md-4">
<img src="assets/images/logo.png" width="150px" class="user-avatar" />
<h1>Heath-Dashboard</h1>
<form role="form">
<div class="form-content">
<div class="form-group">
<input type="text" class="form-control input-underline input-lg" id="email" placeholder="enter email" [(ngModel)]="user.email" name="email" required>
</div>
<div class="form-group">
<input type="password" class="form-control input-underline input-lg" id="password" placeholder="enter password" [(ngModel)]="user.password" name="password" required>
</div>
</div>
<button class="btn rounded-btn" (click)="onLogin()"> Log in </button>
<a class="btn rounded-btn" [routerLink]="['/signup']">Register</a>
</form>
</div>
</div>
</div>
Answered By – Miran Parkar
Answer Checked By – Mildred Charles (AngularFixing Admin)