เรามาลองใช้ Angular Reactive Form กัน😁😀

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

หลังจากได้ลองเขียน Angular มาซักพักใหญ่ๆเลย ผมก็ได้เข้ามาทำ Form และได้มาลองใช้ Reactive Form ว้าววววววว สุดยอดไปเลย แถมเจ้าตัว Reactive Form ยังช่วยในการลด Code ในเงื่อนไขต่างๆของ HTMLได้เยอะเลย และยังช่วยอำนวยความสะดวกในการเขียนโปรแกรมให้โต้ตอบกัน ระหว่างข้อมูลของฝั่ง server กับฝั่งผู้ใช้งาน

Reactive Form คืออะไร ?

Reactive Form เป็นเทคนิคในการสร้าง form ด้วยรูปแบบ reactive ซึ่งเป็นอีกหนึ่งวิธีในการจัดรูปแบบของ Form ใน Angular และยังสามารถดูการเปลี่ยนแปลงของ Form ผ่าน Object ที่เป็น Observable

ขั้นตอนการสร้าง Reactive Form มีขั้นตอนหลักๆคือ

1. เพิ่ม Package material ใน angular
2. เรียกใช้ Reactive forms module ในโปรเจ็กต์ของเรา
3. ทดสอบใช้งาน Reactive Form

1. เพิ่ม Package material ใน angular

ก่อนที่เราจะใช้งาน material เราก็ต้องลง material ก่อนครับ โดยจะมีคำสั่งติดตั้งคือ

ng add @angular/material

2. เรียกใช้ Reactive forms module ในโปรเจ็กต์ของเรา

ขั้นแรกเราจะสร้าง component มาซักหนึ่งตัวก่อนนะครับโดยใช้คำสั่ง
ng g c FormTitle พอเราได้ component มาซักตัวแล้ว เราจะ import module ของเจ้าตัว ReactiveFormsModule เข้าไปไว้ไฟล์ 📁 app.module.ts

ตัวอย่างไฟล์ใน src/app/app.module.ts

เย้ๆๆ 👏👏👏 เท่านี้เราก็ได้ Reactive Form แล้วปรบมือกันหน่อย 👏👏👏เย้ๆๆ
เข้านอนได้ 😴😴 ยังงงงงง อย่าพึ่งเข้านอนจิ เรามาทำความรู้จักกับ Class ที่เราจำเป็นต้องใช้ก่อน 😊

• FormGroup เป็น Form ที่รวบรวม FormControl ให้เป็นกลุ่มเป็นก้อน
• FormControl เป็น Form สำหรับข้อมูล input, checkbox, select, textarea เป็นต้น
• FormArray เป็น Form ที่ใช้สำหรับเก็บข้อมูลเป็น Array
• FormBuilder เป็น service ที่ช่วยให้เราสร้าง Form ได้ง่ายขึ้น
• AbstractControl เป็น class หลักที่ใช้สร้าง form control class อื่นๆ ได้แก่ FormControl, FormGroup และ FormArray

3. ทดสอบใช้งาน Reactive Forms

เราจะมาลองใช้งาน Form กัน 👨‍💻
โดยเราจะทำการ import เจ้าตัว FormBuilder, FormGroup ในไฟล์ 📁 src/app/form-title/form-title.component.ts

ตัวอย่างการเรียกใช้งาน FormBuilder, FormGroup

ต่อไปเราจะมาลองใช้งาน FormGroup และ FormControl ในไฟล์ HTML กันดูนะ

ตัวอย่างการเรียนใช้ formControl ใน HTML

ถึงตรงนี้ทุกคนก็สามารถเรียกใช้งาน Form แบบเริ่มต้นได้แล้ว🤗 ปรบมือ 👏👏👏

ตัวอย่างหลังทำตามมาถึงขั้นตอนนี้นะครับ 🤗 👨🏻‍💻

ตัวอย่างการทดสอบ code

สรุปหน่อยละกัน 😁

หลังจากได้ลองทำเจ้าตัว Reactive Form มาแล้วข้อดีของมันคือช่วยให้เราจัดการข้อมูลที่อยู่ในฟอร์มให้เป็นกลุ่มเป็นก้อน และสามารถแสดงข้อมูลที่เก็บในฟอร์มเอาออกมาแสดงในรูปแบบของ JSON ได้ด้วย

สามารถ Clone Codeได้ที่ Link GitHub 👇🏻👇🏻👇🏻

WutthichaiTGM/AngularForm

ถ้าผิดพลาดประการใดก็ขออภัยด้วยนะครับ 🙏

Angular Reactive Form แบบ(ใช้ Angular Material)
สามารถเข้าไปอ่านบทความของคุณกฤษณะ ประสิทธิ์ ได้ที่ลิงก์ 👇👇👇👇👇

Angular Material Form with Reactive Form

อ้างอิง

—Reactive forms
—AbstractControl
— FormControl
— FormGroup
— FormArray
— FormBuilder