ReduxFormでformatとvalidateを同時に使う際の注意点

個人的メモ。

redux-formでformatとvalidateを同時に使うときには実行順序に注意。
下記のような書き方をした場合は validate => format の順に実行される。
つまりフォーマット前の値がバリデーションに渡される。これでハマったりする。

<Field
  name="price"
  format={formatNumberWithCommas}
  validate={numericStringWithComma}
/>

フォーマット後の値をバリデーションさせたい場合には上記の書き方ではなく下記のように asyncValidate を使って書く。

<Field
  name="price"
  format={formatNumberWithCommas}
/>

...

reduxForm({
  ...
  asyncBlurFields: ['price'],
  asyncValidate: ({ price }, dispatch, props, fieldName) => {
    if (fieldName === 'price') {
      return Promise.delay(0)
        .then(() => ({ price: numericStringWithComma(price) }))
    }
  }
})