บทความนี้เป็นส่วนหนึ่งของซีรีส์ Angular + PrimeNG 19 (CSR, non-standalone) เรียบเรียงจากคู่มืออบรมของ Wutthiphon Tassana — Wirabyte CO., LTD. — ตอนที่ 7/10
ใน Angular การสร้างฟอร์มสามารถทำได้ 2 วิธีหลัก ๆ ได้แก่ Reactive Forms และ Template-driven Forms (ngModel) โดยสำหรับซีรีส์นี้ จะเลือกสอนวิธี Template-driven (ngModel) ก่อน เพราะเขียนง่ายและรวดเร็ว
ส่วนวิธี Reactive Forms ซึ่งใช้ FormControl และ FormGroup นั้น เหมาะสำหรับฟอร์มที่ซับซ้อน ซึ่งสามารถศึกษาเพิ่มเติมได้ที่ https://angular.dev/guide/forms/reactive-forms
การทำฟอร์มเบื้องต้นโดยใช้ ngModel
โดยก่อนอื่นให้ Import FormsModule ที่ app.module.ts ก่อน (ใน LAB Import ให้แล้ว)
จากนั้นทดลองสร้าง Form โดยใช้ input ธรรมดาหรือ Component ของ Prime NG ก็ได้ โดยตัวแปรที่จะเก็บข้อมูลใน Component .ts นั้นสามารถจัดรูปแบบเองได้เลย
.ts
Component .html
สังเกต: ngModel จะเขียนลักษณะ [(ngModel)] ซึ่งคือ Two-way binding นั่นเอง
แล้วทำปุ่ม Submit โดยแบบง่ายเราจะไม่ใช้ <form> คลุมเลย เมื่อกด submit ก็ให้เรียก function onSubmit() ตรง ๆ
ฟังก์ชัน onSubmit()
ทดลองกรอกค่าแล้วกดปุ่ม Submit ดู
จากรูป ก็จะเห็นว่าค่าจากฟอร์มถูกเก็บเข้าตัวแปรแล้วเรียบร้อยตาม log ที่ออกมา
การ Validate ฟอร์ม
จากเดิมที่ได้ทำฟอร์มอย่างง่ายไปแล้ว ต่อไปเราจะทำฟอร์มที่มีการตรวจสอบก่อน submit โดยสามารถทำได้หลายวิธี แต่ที่นิยมคือการทำ form คลุมแล้วเช็คว่า valid หรือไม่ก่อนเรียก ฟังก์ชัน onSubmit()
เริ่มจากนำ <form> มาคลุม และเปลี่ยนปุ่ม submit เป็น type=”submit” (เอา (click) ออก) และกำหนดชื่อให้ฟอร์ม
<form #ชื่อฟอร์ม="ngForm" (ngSubmit)="ชื่อฟอร์ม.valid && ฟังก์ชัน Submit">
ที่ input ต่าง ๆ ต้องตั้ง name ให้กับทุก ๆ Input ด้วยรวมถึง Radio / Checkbox ไม่อย่างนั้นจะ Error
กรณี ไม่ตั้ง name จะแสดง Error
ทดลองใส่ required แล้วลอง submitForm โดยยังไม่กรอกข้อมูล
เมื่อ Submit แล้ว หากดูที่ Console Log จะไม่มีการแสดงเนื่องจากฟอร์มยังไม่ถูกส่ง
และใน UI จะยังไม่ขึ้นแจ้งเตือนใด ๆ
ในการทำให้ Input ของ Prime NG 19 ขึ้นแจ้งเตือนจะต้องเพิ่ม Class เข้าไป 2 ตัว คือ ng-invalid ng-dirty (Prime NG 20 สามาถใช้ [invalid]=”bool” ได้แล้ว)
[ngClass]="!ชื่อตัวแปรที่ผูก ngModel && ชื่อฟอร์ม.submitted ? ['ng-invalid', 'ng-dirty'] : []"เงื่อนไขคือ เมื่อฟอร์มถูก Submit และตัวแปร form_data.first_name ยังว่างให้เพิ่ม class ใน element
ทดลองไม่กรอกค่าแล้ว submit
จะเห็นว่ากรอบแดงมาแล้ว สามารถทำให้ครบทุก ๆ Input ได้เลย
การเพิ่ม Text ด้านล่าง Input ที่ยังไม่ได้กรอกสามารถทำได้โดยใช้หลักการเดียวกัน โดยใช้ *ngIf ได้เลย
*ngIf="!ชื่อตัวแปรที่ผูก ngModel && ชื่อฟอร์ม.submitted"ทดลองเพิ่ม small text เข้าไปตามเงื่อนไข
หรือหากอยากให้ตรวจสอบ realtime ก็เพียงเอา ชื่อฟอร์ม.submitted ออก
ก่อนพิมพ์
หลังพิมพ์
ทดลองทำข้อความแจ้งเตือนการ validate แบบง่าย ๆ
สังเกต ว่าเมื่อฟอร์มมีการเปลี่ยนแปลง สีของข้อความด้านล่างก็จะเปลี่ยนตามเลยทันที ช่วยให้ผู้ใช้เห็นจุดที่ยังกรอกไม่ครบได้
การ handle อื่น ๆ ให้ทำเป็นข้อความ error และแสดงผลต่างหากเช่น รหัสผ่านไม่เหมือนกัน ในฟังก์ชัน Submit จะดีที่สุด
.ts
.html
รหัสผ่านไม่ตรงกัน
ไม่ยอมรับเงื่อนไข
เมื่อการ validate ถูกต้องทั้งหมดก็จะเรียก onSubmit() ทำให้ได้ log ออกมา
