ฟอร์มแบบรีแอกทีฟ

ในบทเรียนนี้ คุณจะได้เรียนรู้ฟอร์มแบบรีแอกทีฟ ซึ่งใช้จัดการกรณีการทำงานของฟอร์มที่ซับซ้อนในแอปพลิเคชัน Angular

ฟอร์มแบบรีแอกทีฟใช้แนวทางเชิงโปรแกรมในการสร้างและจัดการฟอร์ม จึงมีความยืดหยุ่นและความสามารถในการตรวจสอบความถูกต้องมากกว่า

หากต้องการใช้ฟอร์มแบบรีแอกทีฟ ให้นำเข้า ReactiveFormsModule ในโมดูลของคุณ:

import { ReactiveFormsModule } from '@angular/forms';

กำหนดกลุ่มฟอร์มในคลาสคอมโพเนนต์ของคุณ:

this.myForm = new FormGroup({
  name: new FormControl('')
});

ใช้คำสั่ง formGroup ในเทมเพลตเพื่อเชื่อมต่อกลุ่มฟอร์มของคุณ:

<form [formGroup]="myForm">
  <input formControlName="name">
</form>

สามารถเพิ่มตัวตรวจสอบความถูกต้องในฟอร์มแบบรีแอกทีฟได้อย่างง่ายดาย เพื่อให้มั่นใจว่าข้อมูลนำเข้าถูกต้อง:

name: new FormControl('', Validators.required)

จัดการการส่งฟอร์มโดยสมัครรับเหตุการณ์การส่งในคลาสคอมโพเนนต์ของคุณ:

onSubmit() {
  console.log(this.myForm.value);
}

บริการ FormBuilder ช่วยให้การสร้างฟอร์มง่ายขึ้น:

this.myForm = this.fb.group({
  name: ['', Validators.required]
});

ตอนนี้คุณรู้วิธีสร้างฟอร์มแบบรีแอกทีฟ จัดการการตรวจสอบความถูกต้อง และจัดการสถานะฟอร์มอย่างมีประสิทธิภาพแล้ว ทำได้ดีมากครับ/ค่ะ!