Form với React Hook Form

import { z } from 'zod';

export const taskSchema = z.object({
  title: z
    .string()
    .trim()
    .min(1, 'Nhập tiêu đề công việc')
    .max(80, 'Tiêu đề tối đa 80 ký tự'),
  description: z.string().max(500, 'Mô tả tối đa 500 ký tự'),
  priority: z.enum(['low', 'medium', 'high']),
  dueDate: z.date().refine((date) => {
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    return date >= today;
  }, 'Hạn hoàn thành không được ở quá khứ'),
});

export type TaskFormValues = z.infer<typeof taskSchema>;

import { useState } from 'react';
import { Pressable, Text, TextInput, View } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
import { Controller, useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { taskSchema, type TaskFormValues } from './taskSchema';

type Props = {
  initialValues?: TaskFormValues; // có giá trị → chế độ sửa
  onSubmit: (values: TaskFormValues) => Promise<void>;
};

const PRIORITIES = [
  { value: 'low', label: 'Thấp' },
  { value: 'medium', label: 'Trung bình' },
  { value: 'high', label: 'Cao' },
] as const;

export function TaskForm({ initialValues, onSubmit }: Props) {
  const [showPicker, setShowPicker] = useState(false);

  const {
    control,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<TaskFormValues>({
    resolver: zodResolver(taskSchema),
    mode: 'onTouched',
    defaultValues: initialValues ?? {
      title: '',
      description: '',
      priority: 'medium',
      dueDate: new Date(),
    },
  });

  return (
    <View style={{ gap: 12, padding: 16 }}>
      <Controller
        control={control}
        name="title"
        render={({ field: { value, onChange, onBlur } }) => (
          <TextInput
            placeholder="Tiêu đề"
            value={value}
            onChangeText={onChange}
            onBlur={onBlur}
          />
        )}
      />
      {errors.title && <Text style={{ color: 'red' }}>{errors.title.message}</Text>}

      <Controller
        control={control}
        name="description"
        render={({ field: { value, onChange, onBlur } }) => (
          <TextInput
            placeholder="Mô tả"
            multiline
            value={value}
            onChangeText={onChange}
            onBlur={onBlur}
          />
        )}
      />
      {errors.description && (
        <Text style={{ color: 'red' }}>{errors.description.message}</Text>
      )}

      <Controller
        control={control}
        name="priority"
        render={({ field: { value, onChange } }) => (
          <View style={{ flexDirection: 'row', gap: 8 }}>
            {PRIORITIES.map((p) => (
              <Pressable
                key={p.value}
                onPress={() => onChange(p.value)}
                style={{
                  padding: 8,
                  borderRadius: 16,
                  backgroundColor: value === p.value ? '#2563eb' : '#e5e7eb',
                }}
              >
                <Text style={{ color: value === p.value ? 'white' : 'black' }}>
                  {p.label}
                </Text>
              </Pressable>
            ))}
          </View>
        )}
      />

      <Controller
        control={control}
        name="dueDate"
        render={({ field: { value, onChange } }) => (
          <>
            <Pressable onPress={() => setShowPicker(true)}>
              <Text>Hạn: {value.toLocaleDateString('vi-VN')}</Text>
            </Pressable>
            {showPicker && (
              <DateTimePicker
                value={value}
                mode="date"
                onChange={(_event, date) => {
                  setShowPicker(false);
                  if (date) onChange(date);
                }}
              />
            )}
          </>
        )}
      />
      {errors.dueDate && <Text style={{ color: 'red' }}>{errors.dueDate.message}</Text>}

      <Pressable onPress={() => handleSubmit(onSubmit)()} disabled={isSubmitting}>
        <Text>{isSubmitting ? 'Đang lưu...' : 'Lưu công việc'}</Text>
      </Pressable>
    </View>
  );
}