การจัดการ Form ด้วย Formik และ Yup

การจัดการ Form ด้วย Formik และ Yup

สวัสดีครับ กลับมาพบกันอีกครั้งในบทเรียน React Native ฉบับเริ่มต้นสำหรับผู้เรียนคนไทยที่มีความเชี่ยวชาญ ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับการสร้าง Custom Component เพื่อนำไปใช้ซ้ำ ลดความซ้ำซ้อนของโค้ด และเพิ่มความเป็นระเบียบให้กับโปรเจกต์ของเรา ในบทนี้ เราจะมาเรียนรู้เกี่ยวกับการจัดการ Form หรือแบบฟอร์ม ซึ่งเป็นส่วนสำคัญในการรับข้อมูลจากผู้ใช้งาน และการตรวจสอบความถูกต้องของข้อมูลเหล่านั้นก่อนที่จะส่งไปยัง Backend หรือนำไปประมวลผลต่อ โดยเราจะใช้ Library ยอดนิยมสองตัวคือ Formik และ Yup

ทำไมเราต้องใช้ Formik และ Yup ในการจัดการ Form? การสร้าง Form ด้วย React Native เองนั้นไม่ใช่เรื่องยาก แต่การจัดการ State ของ Input fields ต่างๆ, การตรวจสอบความถูกต้องของข้อมูล (Validation), และการจัดการกับ Error messages อาจทำให้โค้ดของเราซับซ้อนและยากต่อการดูแลรักษา Formik และ Yup เข้ามาช่วยแก้ปัญหาเหล่านี้ ทำให้การจัดการ Form เป็นเรื่องง่ายและมีประสิทธิภาพมากยิ่งขึ้น

Formik และ Yup คืออะไร?

• Formik: เป็น Library สำหรับจัดการ Form ใน React และ React Native ช่วยให้เราจัดการ State, Handle Submission, Validation และ Error messages ได้อย่างง่ายดาย
• Yup: เป็น Library สำหรับ Schema Validation ที่ช่วยให้เรากำหนดกฎเกณฑ์ในการตรวจสอบความถูกต้องของข้อมูลได้อย่างยืดหยุ่นและง่ายดาย สามารถใช้ร่วมกับ Formik ได้อย่างลงตัว

การใช้ Formik และ Yup ร่วมกันจะช่วยให้เราสร้าง Form ที่มีประสิทธิภาพ, ทำงานได้อย่างราบรื่น, และง่ายต่อการดูแลรักษา

การติดตั้ง Formik และ Yup

ก่อนที่เราจะเริ่มใช้งาน Formik และ Yup เราต้องทำการติดตั้ง Library ทั้งสองลงในโปรเจกต์ของเราก่อน โดยใช้คำสั่งต่อไปนี้:

npm install formik yup
# หรือ
yarn add formik yup

หลังจากติดตั้งเสร็จเรียบร้อยแล้ว เราก็พร้อมที่จะเริ่มใช้งาน Formik และ Yup ในโปรเจกต์ของเราได้เลย

การสร้าง Form ด้วย Formik

Formik มี Component หลักคือ `` ซึ่งเป็นตัวจัดการ Form ทั้งหมด เราจะต้องห่อ Form ของเราด้วย Component นี้ และกำหนดค่าเริ่มต้น (initialValues), ฟังก์ชันสำหรับ Submit (onSubmit), และ Schema สำหรับ Validation (validationSchema) ให้กับ Formik

มาดูตัวอย่างการสร้าง Form Login ง่ายๆ ด้วย Formik:

import React from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
import { Formik } from 'formik';
import * as Yup from 'yup';

const LoginScreen = () => {
  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      validationSchema={Yup.object({
        email: Yup.string().email('รูปแบบอีเมลไม่ถูกต้อง').required('กรุณากรอกอีเมล'),
        password: Yup.string().min(6, 'รหัสผ่านต้องมีอย่างน้อย 6 ตัวอักษร').required('กรุณากรอกรหัสผ่าน'),
      })}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2)); // จำลองการส่งข้อมูลไปยัง Backend
          setSubmitting(false);
        }, 400);
      }}
    >
      {({
        handleChange,
        handleBlur,
        handleSubmit,
        values,
        errors,
        touched,
        isSubmitting,
      }) => (
        <View style={styles.container}>
          <Text style={styles.label}>อีเมล:</Text>
          <TextInput
            style={styles.input}
            onChangeText={handleChange('email')}
            onBlur={handleBlur('email')}
            value={values.email}
            keyboardType="email-address"
          />
          {errors.email && touched.email && (
            <Text style={styles.error}>{errors.email}</Text>
          )}

          <Text style={styles.label}>รหัสผ่าน:</Text>
          <TextInput
            style={styles.input}
            onChangeText={handleChange('password')}
            onBlur={handleBlur('password')}
            value={values.password}
            secureTextEntry
          />
          {errors.password && touched.password && (
            <Text style={styles.error}>{errors.password}</Text>
          )}

          <Button onPress={handleSubmit} title="เข้าสู่ระบบ" disabled={isSubmitting} />
        </View>
      )}
    </Formik>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  label: {
    fontSize: 16,
    marginBottom: 5,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  error: {
    color: 'red',
    fontSize: 12,
  },
});

export default LoginScreen;

คำอธิบายโค้ด:

• `initialValues`: กำหนดค่าเริ่มต้นให้กับ Input fields ใน Form ของเรา ในที่นี้ เรากำหนดค่าเริ่มต้นให้กับ `email` และ `password` เป็นค่าว่าง
• `validationSchema`: กำหนด Schema สำหรับ Validation โดยใช้ Yup เราจะอธิบายรายละเอียดเกี่ยวกับ Yup ในหัวข้อถัดไป
• `onSubmit`: กำหนดฟังก์ชันที่จะถูกเรียกเมื่อ Form ถูก Submit ฟังก์ชันนี้จะรับค่า `values` ซึ่งเป็น Object ที่มีค่าของ Input fields ทั้งหมด และ Object ที่มีฟังก์ชัน `setSubmitting` ซึ่งเราสามารถใช้เพื่อกำหนดสถานะ Loading ให้กับ Button ได้
• `handleChange`: เป็นฟังก์ชันที่ Formik จัดเตรียมไว้ให้สำหรับ Handle การเปลี่ยนแปลงค่าใน Input fields เราสามารถใช้ `handleChange('email')` เพื่อ Handle การเปลี่ยนแปลงค่าของ Input field ที่มีชื่อว่า `email`
• `handleBlur`: เป็นฟังก์ชันที่ Formik จัดเตรียมไว้ให้สำหรับ Handle เหตุการณ์ `onBlur` ซึ่งเกิดขึ้นเมื่อ Input field สูญเสีย Focus เราใช้ `handleBlur` เพื่อ Trigger การ Validation เมื่อผู้ใช้ออกจาก Input field
• `handleSubmit`: เป็นฟังก์ชันที่ Formik จัดเตรียมไว้ให้สำหรับ Submit Form เราสามารถนำไปผูกกับ `onPress` ของ Button ได้
• `values`: เป็น Object ที่เก็บค่าของ Input fields ทั้งหมด
• `errors`: เป็น Object ที่เก็บ Error messages จากการ Validation
• `touched`: เป็น Object ที่บอกว่า Input field ใดบ้างที่ถูก Touch (Focus แล้วออกจาก Focus) เราใช้ `touched` ร่วมกับ `errors` เพื่อแสดง Error messages เฉพาะ Input fields ที่ถูก Touch แล้วเท่านั้น
• `isSubmitting`: เป็น Boolean ที่บอกว่า Form กำลังอยู่ในสถานะ Submit หรือไม่ เราสามารถใช้ `isSubmitting` เพื่อ Disable Button ในขณะที่ Form กำลัง Submit

การ Validation Form ด้วย Yup

Yup เป็น Library ที่ช่วยให้เรากำหนดกฎเกณฑ์ในการตรวจสอบความถูกต้องของข้อมูลได้อย่างยืดหยุ่นและง่ายดาย เราสามารถกำหนด Schema สำหรับ Validation โดยใช้ Yup แล้วนำไปกำหนดให้กับ `validationSchema` ของ Formik

ในตัวอย่างข้างต้น เราได้กำหนด Schema สำหรับ Validation ดังนี้:

Yup.object({
  email: Yup.string().email('รูปแบบอีเมลไม่ถูกต้อง').required('กรุณากรอกอีเมล'),
  password: Yup.string().min(6, 'รหัสผ่านต้องมีอย่างน้อย 6 ตัวอักษร').required('กรุณากรอกรหัสผ่าน'),
})

คำอธิบายโค้ด:

• `Yup.object()`: สร้าง Object Schema
• `Yup.string()`: กำหนดว่า Field นี้ต้องเป็น String
• `.email('รูปแบบอีเมลไม่ถูกต้อง')`: กำหนดว่า Field นี้ต้องเป็น Email ที่มีรูปแบบถูกต้อง หากไม่ถูกต้องจะแสดง Error message ว่า "รูปแบบอีเมลไม่ถูกต้อง"
• `.min(6, 'รหัสผ่านต้องมีอย่างน้อย 6 ตัวอักษร')`: กำหนดว่า Field นี้ต้องมีความยาวอย่างน้อย 6 ตัวอักษร หากไม่ถึงจะแสดง Error message ว่า "รหัสผ่านต้องมีอย่างน้อย 6 ตัวอักษร"
• `.required('กรุณากรอกอีเมล')`: กำหนดว่า Field นี้ต้องถูกกรอก หากไม่ถูกกรอกจะแสดง Error message ว่า "กรุณากรอกอีเมล"

Yup มี Method ให้เราเลือกใช้มากมายในการกำหนดกฎเกณฑ์ในการตรวจสอบความถูกต้องของข้อมูล เช่น `number()`, `boolean()`, `oneOf()`, `matches()` เป็นต้น เราสามารถศึกษาเพิ่มเติมเกี่ยวกับ Yup ได้จาก GitHub Repository ของ Yup

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับการจัดการ Form ด้วย Formik และ Yup ซึ่งเป็น Library ที่ช่วยให้เราจัดการ Form ได้อย่างมีประสิทธิภาพและง่ายดาย เราได้เรียนรู้วิธีการติดตั้ง Formik และ Yup, การสร้าง Form ด้วย Formik, และการ Validation Form ด้วย Yup

การใช้ Formik และ Yup จะช่วยให้เราสร้าง Form ที่มีประสิทธิภาพ, ทำงานได้อย่างราบรื่น, และง่ายต่อการดูแลรักษา ทำให้เราสามารถโฟกัสกับการพัฒนา Features อื่นๆ ของแอปพลิเคชันของเราได้อย่างเต็มที่

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับการจัดการ State ส่วนกลางของแอปพลิเคชันด้วย Redux ซึ่งเป็นเครื่องมือที่ช่วยให้เราจัดการ State ที่ซับซ้อนได้อย่างมีประสิทธิภาพ อย่าลืมติดตามกันนะครับ!