Flutter-TextFormField: how to use in summary.

หลังจากทำมาครบทั้ง 2 แบบแล้วคือ TextField และ TextFormField สรุปว่าใช้ TextFormField() จะมีลูกเล่นที่มากกว่านะคับ และแนะนำให้ใช้เลยดีกว่า ซึ่งวิธีการใช้จะมีขั้นตอนดังต่อไปนี้นะคับ

• สร้าง TextFormField() แบบปกติเลยโดยมี property ที่ต้องใช้แน่ๆคือ controller,
  obscureText,
  validator ,
  inputFormatters (เด๋ว inputFormatters ผมจะมาเขียนเพิ่มในส่วนท้ายนะคับ,
  focusNode: สำหรับให้วิ่งไปที่ field ถัดไป แบบจะมีปุ่ม Next ตรง keyboard ให้เลย ไม่จำเป็นต้องมาจิ้มที่ field ถัดไป)
  ส่วนอื่นๆจะใช้หรือไม่อยู่ที่การตกแต่งคับ เช่น keyboardType, decoration: InputDecoration(labelText:, hintText:, suffixIcon:),
  onSubmitted: เป็น function รับค่าและสามารถไปเรียก FocusScope.of(context).requestFocus(_passwordFocusNode); เป็นต้น,
  textInputAction: TextInputAction.next จะโชว์ปุ่ม next ที่ keyboard เลย

• สร้าง Form() ขึ้นมาเพื่อครอบส่วนที่เราต้องการ validate เอาไว้ ในที่นี้คือ Column() นะคับ แน่นอนว่าใน Form() จะต้องกำหนด key: _formKey ให้มันด้วย

• เมื่อกำหนด key แล้วจะต้องไปประกาศด้านบนบริเวณ Explicit ด้วยคับว่า

final _formKey = GlobalKey<FormState>();
// สร้าง key ชื่อว่า _formKey แบบ final นะซึ่ง GlobalKey คือ เครื่องมือที่ Flutter เตรียมไว้ให้เราในการสร้างชุดคีย์ของform ของเรา จะทำให้เรารู้ว่าตัว form ของเราอยู่ที่ไหน
// และสร้าง object username, password ขึ้นมารับค่า controller ด้วย
TextEditingController username = TextEditingController();
TextEditingController password = TextEditingController();

• เราจะตรวจสอบเมื่อมีการ press ที่ Button นะคับ ฉะนั้นเราจะมาสร้างเงื่อนไข
  bool pass = _formKey.currentState.validate(); เพื่อไล่ให้ validator: ของทุกตัวทำงานและคืนค่ากลับมาว่า validate ผ่านไหมนั่นเอง

จบล่ะ code ทั้งหมดก้อดูในนี้ได้เลยคับ

สามารถ Clear ได้ด้วย ด้วยการใช้ _formKey.currentState.reset();

Example code นะคับ

Sample of TextFormField() and validation.

สรุปอีกครั้งนะคับ
1. สร้าง TextFormField() กำหนด Property (controller, validator, obscure).

2. สร้าง Form() ขึ้นมาครอบ Column() และกำหนด key: ขึ้นมา แน่นอนว่าจะต้องประกาศ GlobalKey ด้วยแบบนี้
final _formKey = GlobalKey<FormState>();

3. สร้างปุ่ม Login เอาไว้เช็คโดยมีเงื่อนไขว่า ถ้ามีการกดปุ่มก้อจะให้ validator: ไปทำงาน (ตาม TextFormField ที่เราได้ประกาศไว้ก่อนหน้านั่นแหละ)และคืนค่ากลับมาเป็น bool แบบนี้
bool pass = _formKey.currentState.validate();
หรือ if(_formKey.currentState.validate()){}เป็นต้น

4. ค่า input ที่ได้จะเก็บใน object ของ controller นะคับโดยเรียกดูได้จาก
print(username.text);
print(password.text);

แล้วพบกันใหม่เมื่อมีเวลาครับ… Grassroot Engineer.

อ่อ เกือบลืมคับ จิงๆมาเขียนทีหลัง เรื่องของ inputFormatters มันใช้ยังไง

จิงๆ ณ ตอนนี้ผมมีวิธีใช้ 2 แบบที่เป็นประโยชน์คือ
1. ใช้กำหนด maximum ของ digit ใน TextFormFiele ของเรา แต่ตอนนี้เราสามารถใช้ maxLength: 10 แทนได้แล้วเช่นกัน

TextFormField(
  inputFormatters: [LengthLimitingTextInputFormatter(42),],
);

2. ใช้สำหรับกำหนดให้รับเฉพาะตัวเลข โดยยังช่วยตัด spcace ระหว่างตัวเลขให้ด้วย ซึ่งวิธีนี้มีประโยชน์มากๆ ในขั้นตอนการกรอกข้อมูลจำนวนเงินนะคับ เพราะจะช่วยตัด space ระหว่างตัวเลขได้ และยังพิมพ์ตัวอักษรเข้ามาแทรกไม่ได้ด้วย โดยรับแค่ตัวเลข 0–9 เท่านั้น

keyboardType: TextInputType.number, // ทำงานร่วมกัน กรณีต้องการรับแค่ตัวเลข
inputFormatters: 
<TextInputFormatter>[FilteringTextInputFormatter.digitsOnly],

หรือ หรือ

inputFormatters: [FilteringTextInputFormatter.allow(RegExp('[0-9.,]')),],
// ใช้ RegExp ช่วยนะคับในเคสนี้คือ ให้ใส่ได้ 0 ถึง 9, also comma and dot.
// ถ้าไม่เอา dot(.) ก้อให้เหลือแค่นี้พอนะคับ
[FilteringTextInputFormatter.allow(RegExp('[0-9.]')),]
// 0-9 ใส่ได้ แล้วก้อ . ด้วย