การใช้งาน Form และ Form Validation ใน Flutter

import 'package:flutter/material.dart';
  
class Contact extends StatefulWidget {
    static const routeName = '/contact';
 
    const Contact({Key? key}) : super(key: key);
  
    @override
    State<StatefulWidget> createState() {
        return _ContactState();
    }
}
  
class _ContactState extends State<Contact> {
  
    // สร้างฟอร์ม key หรือ id ของฟอร์มสำหรับอ้างอิง
    final _formKey = GlobalKey<FormState>();

    @override
    Widget build(BuildContext context) {

        return Scaffold(
            appBar: AppBar(
                title: Text('Contact Us'),
            ),
            body: Form(  // ใช้งาน Form
              key: _formKey, // กำหนด key
              child: Column(
                  children: <Widget>[ // กำหนด widget ที่จะใช้งานกับฟอร์ม
                      TextFormField(
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return 'Please enter some text';
                          }
                          return null;
                        },
                      ),
                      ElevatedButton(
                        onPressed: () {
                          // อ้างอิงฟอร์มที่กำลังใช้งาน ตรวจสอบความถูกต้องข้อมูลในฟอร์ม
                          if (_formKey.currentState!.validate()) { //หากผ่าน 
                            // แสดงข้อความจำลอง ใน snackbar
                            ScaffoldMessenger.of(context).showSnackBar(
                              const SnackBar(content: Text('Processing Data')),
                            );
                          }
                        },
                        child: const Text('Submit'),
                      ),
                  ],
              ),
            ),
        );
    }
}

 TextFormField(
   cursorColor: Colors.red,
   initialValue: 'Input text', // ค่าเริ่มต้น
   maxLength: 20, // จำกัดความยาวตัวอักษร
   decoration: InputDecoration(
     icon: Icon(Icons.favorite),
     labelText: 'Label text',
     labelStyle: TextStyle(
       color: Color(0xFF6200EE),
     ),
     helperText: 'Helper text',
     suffixIcon: Icon(
       Icons.check_circle,
     ),
     enabledBorder: UnderlineInputBorder(
       borderSide: BorderSide(color: Color(0xFF6200EE)),
     ),
   ),
 ),

TextFormField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    hintText: 'Enter a search term',
  ),
),          
SizedBox(height: 5.0,),          
TextFormField(
  decoration: const InputDecoration(
    border: UnderlineInputBorder(),
    labelText: 'Enter your username',
  ),
),
SizedBox(height: 5.0,),
TextFormField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderSide: BorderSide()
    ),
  ),
),
SizedBox(height: 5.0,),
TextFormField(
  decoration: InputDecoration(
    focusedBorder: OutlineInputBorder( // เมื่อ focus
      borderSide: BorderSide(width: 1.0),
    ),
    enabledBorder: OutlineInputBorder( // สถานะปกติ
      borderSide: BorderSide( width: 1.0), // กำหนดสีในนี้ได้
    ), 
    labelText: 'Username*',
    helperText: '*Required',
  ),
),

TextFormField(
//  autovalidateMode: AutovalidateMode.always,
  validator: (value) {
  if (value == null || value.isEmpty) {
    return 'Please enter some text';
  }
  return null;
  },
),  

if (_formKey.currentState!.validate()) { // ตรวจสอบความถูกต้องของข้อมูลในฟอร์ม

autovalidateMode: AutovalidateMode.always,

// เนื่องจากข้อมูลข้อความ error ที่ validator ต้องการเป็น FormFieldValidator<String>
// เราจึงต้องกำหนดการใช้งาน FormFieldValidator โดยใช้จาก widgets ดึงมาเฉพาะที่ต้องการโดยใช้
// คำว่า show FormFieldValidator
import 'package:flutter/widgets.dart' show FormFieldValidator;
 
// เนื่องจากเราไม่ได้กำหนด constructor และ property ใดๆ จึงใช้งานเป็น mixin
// เป็นรูปแบบหนึ่งของ class
mixin Validators {
  // กำหนดฟังก์ชั่น สำหรับระบุฟิลด์ที่ต้องกรอก
  static FormFieldValidator<String> required(String errMsg) {
    return (value) {
        if(value == null){
          return errMsg;
        }else if(value.isEmpty){
          return errMsg;
        }
        return null;
    };
  }
 
  // กำหนดฟังก์ชั่น สำหรับระบุฟิลด์ต้องกรอกตัวเลขต่ำสุดอย่างน้อย
  static FormFieldValidator<String> min(int min,String errMsg) {
    return (value) => (int.parse(value!) >= 0 && int.parse(value) < min) ? errMsg : null;
  }  
 
  // กำหนดฟังก์ชั่น สำหรับระบุฟิลด์ต้องกรอกตัวเลขสูงสุดอย่างน้อย
  static FormFieldValidator<String> max(int max,String errMsg) {
    return (value) => (int.parse(value!) >= 0 && int.parse(value) > max) ? errMsg : null;
  } 
 
  // กำหนดฟังก์ชั่น สำหรับระบุฟิลด์ต้องกรอกตัวอักษรยาวน้อยสุด
  static FormFieldValidator<String> minLength(int minLength,String errMsg) {
    return (value) => (value!.isNotEmpty && value.length < minLength) ? errMsg : null;
  }  
 
  // กำหนดฟังก์ชั่น สำหรับระบุฟิลด์ต้องกรอกตัวอักษรยาวมากสุดไม่เกิน
  static FormFieldValidator<String> maxLength(int maxLength,String errMsg) {
    return (value) => (value!.isNotEmpty && value.length > maxLength) ? errMsg : null;
  }   
 
  // กำหนดฟังก์ชั่น สำหรับระบุฟิลด์ต้องกรอกข้อมูลตามรูปแบบ RegEex
  static FormFieldValidator<String> pattern(RegExp pattern,String errMsg) {
    return (value) => (value!.isNotEmpty && !pattern.hasMatch(value) ) ? errMsg : null;
  } 
 
  // กำหนดฟังก์ชั่น สำหรับระบุฟิลด์ต้องกรอกข้อมูลอีเมลที่ถูกต้องตามรูปแบบ
  static FormFieldValidator<String> email(String errMsg) {
    final emailPattern = RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+.[a-zA-Z]+");
    return (value) => (value!.isNotEmpty && !emailPattern.hasMatch(value) ) ? errMsg : null;
  }
 
  // กำหนดฟังก์ชั่น สำหรับระบุฟิลด์ต้องใช้งานการตรวจสอบหลายๆ คำสั่งรวมกัน
  static FormFieldValidator<String> compose(List<FormFieldValidator<String>> validators) {
    return (value) {
      for (final validator in validators) {
        if (validator(value) != null) return validator(value);
      }
      return null;
    };
  }
 
}

import '../validations/validation.dart';

// กรณีนี้ จะกำหนด with หรือไม่ก็ได้
class _ContactState extends State<Contact> with Validators {

TextFormField(
  autovalidateMode: AutovalidateMode.always,
  // validator: Validators.required('Please enter some text'), // แบบกำหนดเงื่อนไขเดียว
  validator: Validators.compose([ // แบบกำหนดหลายเงื่อนไข 
    Validators.required('Please enter some text'),
    // Validators.email('Please enter a valid email'),
    Validators.pattern(RegExp(r'^([0-9])+$'), 'Only numberic'),
    Validators.minLength(4,'Please enter 4 digit'),
    Validators.min(2000,'Please enter a number between 2000 and 3000 '),
    Validators.max(3000,'Please enter a number between 2000 and 3000 '), 
  ])
),

dependencies:
  form_field_validator: ^1.1.0

import 'package:form_field_validator/form_field_validator.dart';

TextFormField(
  autovalidateMode: AutovalidateMode.always,
  validator: RequiredValidator(errorText: 'this field is required'),
),

// แบบหลายเงื่อนไข

TextFormField(
  autovalidateMode: AutovalidateMode.always,
  validator: MultiValidator([  
    RequiredValidator(errorText: 'Please enter some text'),
    // EmailValidator(errorText: 'Please enter a valid email'),  
    MinLengthValidator(4, errorText: 'Please enter 4 digit'),  
    PatternValidator(r'^([0-9])+$', errorText: 'Only numberic'),
    RangeValidator(min: 2000, max: 3000, errorText: 'Please enter a number between 2000 and 3000'),
 ]),
 ),

LengthRangeValidator(min: 6, max: 14, errorText: 'Password must be character between 6 and 14 long'),   
DateValidator('yyyy-mm-dd', errorText: 'Invalid date format'), // 2021-11-08 valid

body: SingleChildScrollView(
  child: Form(  // ใช้งาน Form
    key: _formKey, // กำหนด key
....

class _ContactState extends State<Contact> {
  
    // สร้างฟอร์ม key หรือ id ของฟอร์มสำหรับอ้างอิง
    final _formKey = GlobalKey<FormState>();

    // กำหนดตัวแปรรับค่า
    final _text1 = TextEditingController();

    @override
    void dispose() {
      _text1.dispose(); // ยกเลิกการใช้งานที่เกี่ยวข้องทั้งหมดถ้ามี
      super.dispose();
    }

    @override
    Widget build(BuildContext context) {

        return Scaffold(
            appBar: AppBar(
                title: Text('Contact Us'),
            ),
            body: SingleChildScrollView(
              child: Form(  // ใช้งาน Form
                key: _formKey, // กำหนด key
                child: Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Column(
                      children: <Widget>[ // กำหนด widget ที่จะใช้งานกับฟอร์ม
                          TextFormField(
                            controller: _text1, // ผูกกับ TextFormField ที่จะใช้
                            validator: Validators.required('Please enter some text'),
                          ), 
                          SizedBox(height: 5.0,),
                          ElevatedButton(
                            onPressed: () {
                              // อ้างอิงฟอร์มที่กำลังใช้งาน ตรวจสอบความถูกต้องข้อมูลในฟอร์ม
                              if (_formKey.currentState!.validate()) { //หากผ่าน 
                                // แสดงข้อความจำลอง ใน snackbar
                                ScaffoldMessenger.of(context).showSnackBar(
                                  // นำค่าข้อมูลไปแสดงหรือใช้งานผ่าน controller
                                   SnackBar(content: Text('You type: ${_text1.text} ')),
                                );
                              }
                            },
                            child: const Text('Submit'),
                          ),
                      ],
                  ),
                ),
              ),
            ),
        );
    }
}

import 'package:flutter/material.dart';
import 'package:intl/date_symbol_data_local.dart';
import 'package:intl/intl.dart';
 
import '../validations/validation.dart';
 
   
class Contact extends StatefulWidget {
    static const routeName = '/contact';
  
    const Contact({Key? key}) : super(key: key);
   
    @override
    State<StatefulWidget> createState() {
        return _ContactState();
    }
}
   
class _ContactState extends State<Contact> with Validators {
   
    // สร้างฟอร์ม key หรือ id ของฟอร์มสำหรับอ้างอิง
    final _formKey = GlobalKey<FormState>();
 
    late DateFormat dateFormat; // รูปแบบการจัดการวันที่และเวลา
 
    // กำหนดตัวแปรรับค่า
    final _text1 = TextEditingController();
    final _text2 = TextEditingController();
 
    void _selectDate() async {

      final DateTime now = DateTime.now();
      final DateTime firstDate = DateTime(2017, 7, 1); //  ช่วงเริ่มต้น
      final DateTime lastDate = DateTime(2023, 7, 1); //  ช่วงสิ้นสิน
      final DateTime initialDate = now.isAfter(lastDate) ? lastDate : now;

      final DateTime? newDate = await showDatePicker(
        context: context,
        initialDate: initialDate,
        firstDate: firstDate,
        lastDate: lastDate,
        helpText: 'Select a date',
      );
      if (newDate != null) {
        setState(() {
          _text1.value = TextEditingValue(text: dateFormat.format(newDate).toString());
        });
      }
    }    
 
    // เกียวกับการใช้เวลา 
    /// แปลงเวลาจากวันที่ TimeOfDay.fromDateTime(DateTime.now())
    /// เวลาปัจจุบัน TimeOfDay.now()
    /// แบบกำหนดเอง TimeOfDay(hour: 7, minute: 15),
    void _selectTime() async {
      final TimeOfDay? newTime = await showTimePicker(
        context: context, 
        initialTime: TimeOfDay.now(), 
      );
      if (newTime != null) {
        setState(() {
          _text2.value = TextEditingValue(text: newTime.format(context));
        });
      }
    }    
 
    @override
    void initState() {
      // กำหนดรูปแบบการจัดการวันที่และเวลา 
      Intl.defaultLocale = 'en';
      initializeDateFormatting();
      dateFormat = DateFormat('d/MM/y','en');
 
    }
 
    @override
    void dispose() {
      _text1.dispose(); // ยกเลิกการใช้งานที่เกี่ยวข้องทั้งหมดถ้ามี
      _text2.dispose(); 
      super.dispose();
    }
 
    @override
    Widget build(BuildContext context) {
 
        return Scaffold(
            appBar: AppBar(
                title: Text('Contact Us'),
            ),
            body: SingleChildScrollView(
              child: Form(  // ใช้งาน Form
                key: _formKey, // กำหนด key
                child: Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Column(
                      children: <Widget>[ // กำหนด widget ที่จะใช้งานกับฟอร์ม
                          TextFormField(
                            decoration: InputDecoration(
                              icon: Icon(Icons.date_range),
                            ),
                            controller: _text1, // ผูกกับ TextFormField ที่จะใช้
                            validator: Validators.required('Please enter some text'),
                            onTap: _selectDate,
                            readOnly: true,
                          ), 
                          SizedBox(height: 5.0,),
                          TextFormField(
                            decoration: InputDecoration(
                              icon: Icon(Icons.alarm),
                            ),                            
                            controller: _text2, // ผูกกับ TextFormField ที่จะใช้
                            validator: Validators.required('Please enter some text'),
                            onTap: _selectTime,
                            readOnly: true,
                          ), 
                          SizedBox(height: 5.0,),                                 
                          ElevatedButton(
                            onPressed: () {
                              // อ้างอิงฟอร์มที่กำลังใช้งาน ตรวจสอบความถูกต้องข้อมูลในฟอร์ม
                              if (_formKey.currentState!.validate()) { //หากผ่าน 
                                // แสดงข้อความจำลอง ใน snackbar
                                ScaffoldMessenger.of(context).showSnackBar(
                                  // นำค่าข้อมูลไปแสดงหรือใช้งานผ่าน controller
                                   SnackBar(content: Text('Date: ${_text1.text} Time: ${_text2.text}')),
                                );
                              }
                            },
                            child: const Text('Submit'),
                          ),
                      ],
                  ),
                ),
              ),
            ),
        );
    }
}

// กำหนดสถานะการแสดงแบบรหัสผ่าน
bool _isHidden = true;

TextFormField(
  decoration: InputDecoration(
    icon: Icon(Icons.lock),
    suffixIcon: IconButton(
      onPressed: (){
        setState(() {
          _isHidden = !_isHidden; // เมื่อกดก็เปลี่ยนค่าตรงกันข้าม
        });
      }, 
      icon: Icon(
        _isHidden // เงื่อนไขการสลับ icon
        ? Icons.visibility_off 
        : Icons.visibility
      ),
    ),
  ),    
  controller: _text3, // ผูกกับ TextFormField ที่จะใช้                        
  validator: Validators.required('Please enter some text'),
  obscureText: _isHidden, // การซ่อนหรือแสดงข้อความในรูปแบบรหัสผ่าน
), 

TextFormField(
  decoration: InputDecoration(
    icon: Icon(Icons.card_giftcard),
  ),
  controller: _text1, // ผูกกับ TextFormField ที่จะใช้
  validator: Validators.required('Please enter some text'),
  keyboardType: TextInputType.number,
), 

import 'package:flutter/services.dart';

  keyboardType: TextInputType.number,
  inputFormatters: <TextInputFormatter>[
      FilteringTextInputFormatter.digitsOnly
  ],   

FilteringTextInputFormatter.allow(RegExp(r'[0-9\.]')),   

import 'package:flutter/material.dart';
import 'package:intl/date_symbol_data_local.dart';
import 'package:intl/intl.dart';
import 'package:flutter/services.dart';
 
import '../validations/validation.dart';
 
   
class Contact extends StatefulWidget {
    static const routeName = '/contact';
  
    const Contact({Key? key}) : super(key: key);
   
    @override
    State<StatefulWidget> createState() {
        return _ContactState();
    }
}
   
class _ContactState extends State<Contact> with Validators {
   
    // สร้างฟอร์ม key หรือ id ของฟอร์มสำหรับอ้างอิง
    final _formKey = GlobalKey<FormState>();
 
    late DateFormat dateFormat; // รูปแบบการจัดการวันที่และเวลา
 
    // กำหนดตัวแปรรับค่า
    final _text1 = TextEditingController();
    final _text2 = TextEditingController();
    final _text3 = TextEditingController();
    final _text4 = TextEditingController();

    // กำหนดสถานะการแสดงแบบรหัสผ่าน
    bool _isHidden = true;    
 
    void _selectDate() async {

      final DateTime now = DateTime.now();
      final DateTime firstDate = DateTime(2017, 7, 1); //  ช่วงเริ่มต้น
      final DateTime lastDate = DateTime(2023, 7, 1); //  ช่วงสิ้นสิน
      final DateTime initialDate = now.isAfter(lastDate) ? lastDate : now;

      final DateTime? newDate = await showDatePicker(
        context: context,
        initialDate: initialDate,
        firstDate: firstDate,
        lastDate: lastDate,
        helpText: 'Select a date',
      );
      if (newDate != null) {
        setState(() {
          _text1.value = TextEditingValue(text: dateFormat.format(newDate).toString());
        });
      }
    }    
 
    // เกียวกับการใช้เวลา 
    /// แปลงเวลาจากวันที่ TimeOfDay.fromDateTime(DateTime.now())
    /// เวลาปัจจุบัน TimeOfDay.now()
    /// แบบกำหนดเอง TimeOfDay(hour: 7, minute: 15),
    void _selectTime() async {
      final TimeOfDay? newTime = await showTimePicker(
        context: context, 
        initialTime: TimeOfDay.now(), 
      );
      if (newTime != null) {
        setState(() {
          _text2.value = TextEditingValue(text: newTime.format(context));
        });
      }
    }    
 
    @override
    void initState() {
      // กำหนดรูปแบบการจัดการวันที่และเวลา 
      Intl.defaultLocale = 'en';
      initializeDateFormatting();
      dateFormat = DateFormat('d/MM/y','en');
 
    }
 
    @override
    void dispose() {
      _text1.dispose(); // ยกเลิกการใช้งานที่เกี่ยวข้องทั้งหมดถ้ามี
      _text2.dispose(); 
      super.dispose();
    }
 
    @override
    Widget build(BuildContext context) {
 
        return Scaffold(
            appBar: AppBar(
                title: Text('Contact Us'),
            ),
            body: SingleChildScrollView(
              child: Form(  // ใช้งาน Form
                key: _formKey, // กำหนด key
                child: Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Column(
                      children: <Widget>[ // กำหนด widget ที่จะใช้งานกับฟอร์ม
                          TextFormField(
                            decoration: InputDecoration(
                              icon: Icon(Icons.card_giftcard),
                            ),
                            controller: _text4, // ผูกกับ TextFormField ที่จะใช้
                            validator: Validators.required('Please enter some text'),
                            keyboardType: TextInputType.number,
                            inputFormatters: <TextInputFormatter>[
                                FilteringTextInputFormatter.digitsOnly
                            ],
                          ),                      
                          TextFormField(
                            decoration: InputDecoration(
                              icon: Icon(Icons.lock),
                              suffixIcon: IconButton(
                                onPressed: (){
                                  setState(() {
                                    _isHidden = !_isHidden; // เมื่อกดก็เปลี่ยนค่าตรงกันข้าม
                                  });
                                }, 
                                icon: Icon(
                                  _isHidden // เงื่อนไขการสลับ icon
                                  ? Icons.visibility_off 
                                  : Icons.visibility
                                ),
                              ),
                            ),    
                            controller: _text3, // ผูกกับ TextFormField ที่จะใช้                        
                            validator: Validators.required('Please enter some text'),
                            obscureText: _isHidden, // การซ่อนหรือแสดงข้อความในรูปแบบรหัสผ่าน
                          ),                      
                          TextFormField(
                            decoration: InputDecoration(
                              icon: Icon(Icons.date_range),
                            ),
                            controller: _text1, // ผูกกับ TextFormField ที่จะใช้
                            validator: Validators.required('Please enter some text'),
                            onTap: _selectDate,
                            readOnly: true,
                          ), 
                          SizedBox(height: 5.0,),
                          TextFormField(
                            decoration: InputDecoration(
                              icon: Icon(Icons.alarm),
                            ),                            
                            controller: _text2, // ผูกกับ TextFormField ที่จะใช้
                            validator: Validators.required('Please enter some text'),
                            onTap: _selectTime,
                            readOnly: true,
                          ), 
                          SizedBox(height: 5.0,),                                 
                          ElevatedButton(
                            onPressed: () {
                              // อ้างอิงฟอร์มที่กำลังใช้งาน ตรวจสอบความถูกต้องข้อมูลในฟอร์ม
                              if (_formKey.currentState!.validate()) { //หากผ่าน 
                                // แสดงข้อความจำลอง ใน snackbar
                                ScaffoldMessenger.of(context).showSnackBar(
                                  // นำค่าข้อมูลไปแสดงหรือใช้งานผ่าน controller
                                   SnackBar(content: Text('Date: ${_text1.text} Time: ${_text2.text}')),
                                );
                              }
                            },
                            child: const Text('Submit'),
                          ),
                      ],
                  ),
                ),
              ),
            ),
        );
    }
}