Ở bài trước , chúng ta đã tạo ra được một new project Angular và Welcome component . Thì ở bài này , chúng ta sẽ tiếp tục đi vào phần tạo login component và setting nó nhé !
Đầu tiên chúng ta sẽ tạo component mới bằng lệnh "ng g c login" :
Tiếp theo đó chúng ta sẽ mở project trong visual code và mở file app.component.html để thêm selector cho component mới (login):
Màn hình localhost:4200 :
Các bạn hãy comment <app-welcome></app-welcome> và <router-outlet></router-outlet> lại nhé ! Ở bài này chúng ta chưa dùng tới nó. Bây giờ , chúng ta sẽ tiến hành code Login page. Chúng ta sẽ mở file html của login thêm đoạn code đơn giản :
<div>
User Name : <input type="text" name="username">
Password : <input type="password" name="password">
<button>Login</button>
</div>
Màn hình localhost:
Tiếp theo, chúng ta sẽ add click event vào Login page , các bạn hãy vào file "login.component.ts" tạo hàm handleLogin() ví dụ :
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
username = ''; //khởi tạo biến
password = '';
constructor() { }
ngOnInit(): void {
}
handleLogin(){ //Tạo hàm handleLogin()
console.log(this.username);
}
}
Bên file login html chúng ta sẽ sử dụng [(ngModel)] để binding dữ liệu 2 chiều :
<div>
User Name : <input type="text" name="username" [(ngModel)] = "username">
Password : <input type="password" name="password" [(ngModel)] = "password">
<button (click)="handleLogin()">Login</button>
</div>
ngModel là một Directive dùng để liên kết dữ liệu với client, nghĩa là nó thường được dùng để cho người dùng nhập liệu nên ta hay sử dụng trong form html.Các bạn có thể lên trang DOC của Angular để tìm hiểu thêm về nó.
Lưu ý : khi bạn sử dụng [(ngModel)] thì phải import FormsModule vào file app.module.ts như dưới đây nếu không sẽ bị lỗi:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { WelcomeComponent } from './welcome/welcome.component';
import { LoginComponent } from './login/login.component';
@NgModule({
declarations: [
AppComponent,
WelcomeComponent,
LoginComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Bây giờ các bạn ra ngoài localhost bật F12 -> console , nhập thử username password rồi click Login sẽ được kết quả như dưới :
Mọi thứ đều ổn , Tiếp theo chúng ta sẽ add Hardcoded Authentication vào login và sử dụng *ngIf trong angular :
file login.component.html :
Code Here <H1>Login!</H1>
<div class="container">
<div class="alert alert-warning" *ngIf='invalidLogin'>{{errorMessage}}</div>
<div>
User Name : <input type="text" name="username" [(ngModel)]="username">
Password : <input type="password" name="password" [(ngModel)]="password">
<button (click)=handleLogin() class="btn btn-success">Login</button>
</div>
</div>
file login.component.ts :
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
username = '' //khởi tạo biến
password = ''
errorMessage = 'Invalid Fail' //bien error message
invalidLogin = false
constructor() { }
ngOnInit(): void {
}
handleLogin(){ //Tạo hàm handleLogin()
console.log(this.username);
// console.log(this.username);
if(this.username==="marcus" && this.password === '123') { //check login basic
this.invalidLogin = false
} else {
this.invalidLogin = true
}
}
}
Vậy là khi chúng ta nhập sai username và password nó sẽ render ra error message bởi vì chúng ta sử dụng *ngIf để check điều kiện bên html .
username = marcus
password = 123
Bài này mình sẽ dừng tại đây, ở phần tiếp theo mình sẽ làm về routes để điều hướng, Login Page, Welcome Page and Error Page !