angular 4 จัดการ form properties ด้วย interface

สวัสดีครับ วันนี้มาเจอกับผมมอีกแล้ว วันนี้ผมจะมาบอกเรื่องของ การจัดการ form properties ด้วย interface กัน

คือคราวที่แล้วเรามีการสร้าง form properties ใน components ตามภาพข้างบนครับ ปัญหาของตรงนี้ก็คือว่า เราต้องมีการกำหนด properties ให้กับ form แต่คราวนี้โค้ดมันจะเยอะในหน้า form นี้ แล้ววันนี้ผมจะมานำเสนอ การกำหนด properties ด้วย interface แทน ซึ่งอาจจะทำให้โค้ดในหน้านี้ลดลงไปเยอะเลยครับ แล้วการเรียกใช้งานผ่าน object ก็สามารถเห็น properties ทั้งหมดได้ด้วย กีณีเราลืมว่า object ตัวนี้ มี properties อะไร วิธีนี้หายห่วงไปเลยครับ โอเครละ มาดูกันครับ

อันดับแรก ทำการเปิด Terminal ของ vsCode มาก่อนครับ

ทำการสร้าง interface มาใหม่ ด้วย คำสั่ง ng g interface interfaces/my-forms angular cli จะสร้าง interface ขึ้นมาให้เก็บไว้ใน folder interfaces ตามด้วยชื่อ my-forms จากนั้นกด enter บน keyboard ได้เลยครับ

เมื่อสร้างเสร็จจะปรากฎข้อความดังนี้ครับ แล้วบอกว่า ไฟล์ my-forms.ts ถูกสร้างเรียบร้อยแล้วครับ คราวนี้เดี่ยวเรามาดู ที่อยู่ไฟล์กัน

พอเรมาดูที่อยู่ไฟล์ก็จะเห็น folder และชื่อไฟล์ตามที่เราต้องการแล้วนะครับ คราวนี้เราต้องมากำหนด properties ให้กับ for กันครับ

ถ้าเราดูใน component จะมีโครงสร้างแบบนี้ครับ
มี name, lname, age เราก็มาสร้างโครงสร้างให้เหมือนกัน

สร้างโครงสร้างฟอร์มแบบผมเลยครับ กำหนดไปให้ครบนะครับว่า properties อะไรบ้างแล้วรบุไปด้วยว่า ประเภทข้อมูลเป็นประเภทอะไร แต่คราวนี้ เราเจอปัญหาอย่างหนึ่งว่า ตัว propeties ทุกตัวที่สร้างมา ต้องการกำหนดค่ามาให้ด้วย อ้าว…. แล้วถ้ายังไม่อยากำหนดค่าละ ทำไง….. คิดๆ…..

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

ความสงสัยต่อมาคือ แล้วจะเรียกใช้แบบไหน………. ตามมาเลยครับ ตามผมมา

อันดับแรก import classes เข้ามาใน component ที่ต้องการก่อน ครับ ตรง ‘./’ คือที่อยู่โฟลเดอร์ที่อยู่ที่เดี่ยวกันนะครับ แต่ถ้า ‘../’ หมายถึงให้ถอยออกไป 1 โฟลเดอร์

ให้กำหนดไปที่ตัวแปรใน component ได้เลยครับ ดังนี้
formData: MyForms = {}; ความหมายคือกำหนดให้ formData มี properties ตาม myForms ใน interface ตามที่ได้สร้างมาข้างต้น

ถ้าลองรันดูทุกอย่างก็ปกติ ไม่มี Error แต่อย่างใด คราวนี้เรามาแก้อีกนิดนึง นะครับ

โค้ด method save อันเก่ามีโค้ดแบบนี้ครับ คือสมมุติว่า methode save มาการรับค่ามา อาจจะต้องระบุ ประเภทข้อมูลด้วยนะครับ เพื่อตอนเรียกใช้จะได้แสดง properties ให้เราเห็นทุกตัว และที่สำคัญเรายังสามารถอ้าง ประเภทข้อมูลนี้ในเหตุกรณ์อื่นๆได้อีกด้วย

ถ้าใน form มีการส่งค่ามาด้วย save(formData) มาที่ method save() จะต้องการระบุ ประเภทข้อมูลด้วยนะครับ ดังนี้

แปลงโค้ดนิดนึงได้แบบนี้ครับ จะสังเกตุว่าใน method save มีการรับค่ามาด้วย แต่ประเภทข้อมูลก้ต้องให้เป็นตาม interface ที่เราสร้างไว้ด้วย ตัวแปรที่ส่งค่ามาจะได้โครงสร้าง properties เหมือนกันครับ เวลาอ้าง properties จะได้ง่าย ดังนี้ครับ

ถ้าเราอ้าง properties ด้วยการกด . จะมี properties ตามที่เราได้สร้าง ใน interface ทุกอย่าง ง่ายไหมครับแบบนี้ คราวนี้ถ้าเพิ่ม properties มาอีก เราก็มาแก้ใน interface ที่เดียวจบเลยครับ

หวังว่าบทความนี้จะเป็นประโยชน์กับทุกคนนะครับ แล้วเจอกันใหม่ ในเรื่องอะไร ติดตามนะครับ…….