Get Adobe Flash player

AngularJS วิธี setDirty และ setTouched กับ required input ที่ผู้ใช้ไม่ได้กรอก

ปกติเมื่อใช้ AngularJS จะมีการ Validate Form ให้อัตโนมัติโดยปกติจะมีเงื่อนไขในการแสดงข้อความแจ้งเตือนให้กรอกข้อมูลดังนี้

  1. Invalid คือ Input ที่ไม่ถูกต้อง เช่น ต้องกรอก (required) แต่ไม่กรอก หรือ กรอกข้อมูลผิด format / ผิดประเภท
  2. Dirty คือ Input มีการคีย์ข้อมูล หรือเลือกข้อมูลแล้ว
  3. Touched คือ Input ที่เคยถูกคลิกเลือก หรือแตะเพื่อจะคีย์  (Focus)

แต่ก็มีปัญหาอยู่ว่า ถ้า require input ที่ยังไม่ได้กรอก หรือยังไม่ได้แตะต้องเลย จะไม่มี Dirty หรือ Touched พอผู้ใช้กด Submit Form ก็จะไม่เห็นการแจ้งเตือน จึงจำเป็นที่จะต้องมีการสั่ง Set Dirty และ Touched เพื่อให้ข้อความแจ้งเตือนในแต่ละ input ที่ Invalid แสดง โดยใช้ Code ดังนี้

อย่างไรก็ตาม Code นี้สามารถรองรับเมื่อมีการใช้ Sub Form ด้วย

Leave a Reply

Your email address will not be published. Required fields are marked *