[Angular + SpringBoot] Fullstack Project Todo List Part 2 : Login Component

Ở 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 !