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

Reactive forms ใน Angular เป็นวิธีสร้างฟอร์มโดยใช้ข้อมูลแบบ reactive ซึ่งหมายความว่าข้อมูลของฟอร์มจะถูกเก็บไว้ใน object และการเปลี่ยนแปลงของข้อมูลใด ๆ จะสะท้อนให้เห็นในฟอร์มทันที

Reactive forms มีข้อดีหลายประการเหนือ template-driven forms เช่น

• Reactive forms ทำให้ง่ายต่อการสร้างฟอร์มที่ซับซ้อน
• Reactive forms ทำให้ง่ายต่อการจัดการการตรวจสอบของฟอร์ม
• Reactive forms ทำให้ง่ายต่อการแชร์ข้อมูลของฟอร์มกับส่วนอื่น ๆ ของแอปพลิเคชัน

การเริ่มต้นใช้งาน reactive forms

เพื่อเริ่มต้นใช้งาน reactive forms เราต้อง import FormBuilder และ FormGroup จาก @angular/forms

จากนั้นเราสามารถสร้าง FormGroup สำหรับฟอร์มของเราได้ FormGroup เป็น object ที่เก็บข้อมูลของฟอร์มและฟังก์ชันที่ใช้ในการจัดการข้อมูลฟอร์ม

ตัวอย่างการสร้าง FormGroup สำหรับฟอร์มที่ง่าย

import { FormBuilder, FormGroup } from '@angular/forms';

const formGroup: FormGroup = new FormBuilder().group({
  name: [''],
  email: [''],
});

ในตัวอย่างนี้ เราสร้าง FormGroup ที่มีสองฟิลด์: name และ email

การผูกข้อมูลกับฟอร์ม

เราสามารถผูกข้อมูลของฟอร์มกับองค์ประกอบของ HTML ได้โดยใช้ FormControlDirective

ตัวอย่างการผูกข้อมูลของฟอร์มกับองค์ประกอบของ HTML

<input type="text" formControlName="name" />
<input type="email" formControlName="email" />

ในตัวอย่างนี้ เราผูกข้อมูลของฟอร์ม name และ email กับองค์ประกอบของ input

การตรวจสอบฟอร์ม

Reactive forms มีฟังก์ชันที่ใช้ในการตรวจสอบฟอร์มในตัว เราสามารถใช้ฟังก์ชันเหล่านี้เพื่อตรวจสอบว่าข้อมูลของฟอร์มถูกต้องและครบถ้วนหรือไม่

ตัวอย่างการตรวจสอบฟอร์ม

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

const formGroup: FormGroup = new FormBuilder().group({
  name: ['', Validators.required],
  email: ['', Validators.required],
});

ในตัวอย่างนี้ เราใช้ฟังก์ชัน Validators.required() เพื่อตรวจสอบว่าฟิลด์ name และ email ไม่ว่าง

การส่งฟอร์ม

เมื่อเราต้องการส่งฟอร์ม เราสามารถใช้ submit() ของ FormGroup

ตัวอย่างการส่งฟอร์ม

const formGroup: FormGroup = new FormBuilder().group({
  name: [''],
  email: [''],
});

formGroup.submit().subscribe((formData) => {
  // Do something with the form data
});

สรุป

Reactive forms เป็นวิธีสร้างฟอร์มที่ทรงพลังและยืดหยุ่นใน Angular Reactive forms ทำให้ง่ายต่อการสร้างฟอร์มที่ซับซ้อน จัดการการตรวจสอบของฟอร์ม และแชร์ข้อมูลของฟอร์มกับส่วนอื่น ๆ ของแอปพลิเคชัน