はじめに

Formikで利用する場合のYupのカスタマイズで色々使い方を書いたのですが、その頃には実装されていなかった、Yupでtest()関数を実行するときに「親の値を参照する」機能がついに5月末に実装されたので使い方をまとめました。基本の使い方は判っている前提で書きます。これまでは色々裏道を使ってなんとか処理していましたが、これでとても使えるライブラリになりました。

対応バージョン

v0.29.1から

実装

Yup.object().shape({
  name: Yup.string().require(),
  parts: Yup.array().of(
    Yup.object.shape({
      name: Yup.string().required(),
      weight: Yup.number()
        .min(0)
        .test('maxWeight', '合計129.3Kg以上はNG', function(value) {
          if (value == null || value === '') return true;

          let robot = this.from[1].value; //<--------ここで参照
          let maxWeight = 0;
          robot.parts.forEach(part => {
            maxWeight += part.weight;
          });
          if (maxWeight > 129.3) {
            return false;
          }
          return true;
        }),
    })
  ),
});

こんな風に、this.from変数を使って上位の構造にアクセスできるようになりました。
from変数の中身はネストの深さに応じた配列となります。
例えばpart「頭」のweightを編集中の場合、

this.from[0].valueの中身は

{name: '頭', weight: 30 },

this.from[1].valueの中身は

{
    name: 'ドラえもん',
    parts: [
      { name: '頭', weight: 30 },
      { name: 'ボディー', weight: 39 },
      { name: '足', weight: 30 },
      { name: '手', weight: 30 },
    ],
  }

と、なります。ネストが深ければ、　from[2], from[3], ... と増えていきます。

訂正

当初 from[x] で、値を参照できるように当初書いてしまいましたが、正しくは from[x].value です。