yupで他の値を元に挙動を変更したい

何の記事?

yupで他の値を元にバリデーションの挙動を変えたかった。すぐ忘れそうなので覚書として放流🐟

前提条件

例として説明すると以下の型に沿うようなオブジェクトがある。
Settingの使い道は、fullNameとlastName両方の値が入力済みであった場合にのみ、useFullNameをtrueに出来る。といった要件。
逆に言えば、fullNameとlastNameが双方入力されていないとfalseに限定される。

type ProfileType = {
    lastName?: string;
    firstName?: string;
}

type SettingType = {
    useFullName: boolean;
}

実装

サクッと

yup.object().shape({
  firstName: yup.string(),
  lastName: yup.string(),
  useFullName: yup.boolean().required()
    .when(["firstName", "lastName"], {
      // isの戻り値がtrueになった場合にthenが実行される。
      is: (firstName, lastName) => !firstName || !lastName,
      then: yup.bool().oneOf([false], "両方に値必須の助"),
  }),
})

ちなみに、yup.refを使っても別の値の参照はできるっぽい。