Zodによるバリデーションチェックの前に入力の前処理を行う

背景

• React Hook Form + Zod の組み合わせで、フォームの入力内容のバリデーションチェック等を行なっている
• 未入力項目において、UI上スケルトン表示のために入力がない場合には仮の値をデフォルトの値として格納している
• ただしSubmit時には、ユーザーの入力だけをチェックし、システム都合で格納した値は除外した上でバリデーションチェックを行いたい

対応

• zod の preprocess メソッドを用いて前処理を行う

  const hogeSchema = z.object({
    name: z.string().min(1, { message: '必須項目です' }),
    age: z.number()
  })
  
  export const chatSettingFormSchema = z.object({
    hoge: z.preprocess((values: Array<ChatCtaSettingType>) => {
  		// 入力がないものは除外
      const result = values.filter((val) => val.name && val.age)
      return result // この値に対してバリデーションチェックが走る
    }, z.array(hogeSchema)),
    fuga: fugaSchema
  })