tiktok นับยอดวิวยังไง

ตัวอย่างหน้า login ใน Angular มีดังนี้

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  form: FormGroup;

  constructor(private fb: FormBuilder, private router: Router) {}

  ngOnInit() {
    this.form = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required]
    });
  }

  onSubmit() {
    if (this.form.valid) {
      // ทำการ login
    }
  }

}

<h1>Login</h1>

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input type="email" formControlName="email" placeholder="Email">
  <input type="password" formControlName="password" placeholder="Password">
  <button type="submit">Login</button>
</form>

หน้า login นี้จะประกอบด้วย input field สำหรับป้อนข้อมูลอีเมลและรหัสผ่าน เมื่อผู้ใช้ป้อนข้อมูลแล้วกดปุ่ม “Login” ระบบจะตรวจสอบความถูกต้องของข้อมูล หากข้อมูลถูกต้อง ระบบจะทำการ login และนำผู้ใช้ไปยังหน้าอื่น หากข้อมูลไม่ถูกต้อง ระบบจะแสดงข้อความแจ้งเตือน

ตัวอย่างการทดสอบหน้า login มีดังนี้

$ ng serve

เปิดเบราว์เซอร์ไปที่ http://localhost:4200

ป้อนข้อมูลอีเมลและรหัสผ่านที่ถูกต้องแล้วกดปุ่ม “Login”

ผู้ใช้จะถูกนำไปยังหน้าอื่น

ป้อนข้อมูลอีเมลและรหัสผ่านที่ไม่ถูกต้องแล้วกดปุ่ม “Login”

ระบบจะแสดงข้อความแจ้งเตือน

นอกจากนี้ ยังสามารถเพิ่มการตรวจสอบความถูกต้องของข้อมูลอื่นๆ เช่น การตรวจสอบว่าอีเมลและรหัสผ่านเป็นรูปแบบที่กำหนดไว้หรือไม่ เป็นต้น