Asrofil Vault

5. Post Form Tanpa NgModule

2 min read

tech

Table of Content

Introduction

Kali ini ada case sederhana. Bila login menggunakan nik tidak sesuai dengan yg gue mau maka buat kirim kan alert. jika sesuai maka di navigate ke route home.

Component HTML

app/layouts/login-nik/login-nik.component.html

<div class="container">
  <h5 class="mb-4">Silahkan masukkan NIK Anda untuk memulai aplikasi.</h5>
  <div class="form-group d-flex align-items-center">
    <input type="text" class="form-control mr-2" id="nik" placeholder="Input NIK" #nikInput>&nbsp;&nbsp;&nbsp;
    <button class="btn btn-success" (click)="login(nikInput.value)">LOGIN</button>
  </div>
</div>

Penjelasan:

  • id="nik": Ini adalah atribut ID yang memberikan identifikasi unik untuk elemen input. Ini bisa digunakan untuk referensi dalam JavaScript atau CSS.
  • #nikInput: Ini adalah referensi template yang memungkinkan Anda untuk mengakses elemen input ini di dalam komponen Angular. Anda dapat menggunakan nama ini untuk mendapatkan nilai dari input saat tombol diklik.
  • (click)="login(nikInput.value)": Ini adalah event binding Angular. Ketika tombol diklik, metode login() akan dipanggil dengan parameter nikInput.value, yang merupakan nilai yang dimasukkan oleh pengguna ke dalam input. Ini memungkinkan Anda untuk memproses nilai NIK yang dimasukkan saat tombol diklik.

Component TS

import { Component } from '@angular/core';
import { Router } from '@angular/router';
 
@Component({
  selector: 'app-login-nik',
  imports: [],
  templateUrl: './login-nik.component.html',
  styleUrl: './login-nik.component.css'
})
export class LoginNikComponent {
  nik: string = ''; 
 
  constructor(private router: Router) {}
 
  login(nik: string) {
    if (nik == '105000464') {
      this.router.navigate(['/home']); 
    } else {
      alert('NIK tidak valid!'); 
    }
  }
}

Penjelasan:

  • nik: string = '';: Ini adalah properti kelas yang digunakan untuk menyimpan nilai NIK yang dimasukkan oleh pengguna.
  • private router: Router: Ini menggunakan dependency injection untuk menginjeksi instance dari Router ke dalam komponen. Dengan cara ini, Anda dapat menggunakan this.router di seluruh kelas untuk melakukan navigasi.
  • Kata kunci private berarti bahwa properti router hanya dapat diakses dari dalam kelas LoginNikComponent.
  • this.router.navigate(['/home']);: Jika NIK cocok, aplikasi akan menavigasi ke rute /home, yang biasanya merupakan halaman utama setelah login berhasil.

Date: 24-03-2025

Graph View

Recent notes