【フォームブリッジ】カスタマイズ：テーブル行単位でのバリデーション設定について

[Legacy_Account390 (t.y（Legacy Account）)]

表題の件について、項目単位で動的にバリデーションを設定する際、テーブル内の行単位で設定する方法がわかりません。

state.fields[0].fields[0].validations.push()

で、テーブル内の指定フィールドにバリデーションが設定できることはわかったのですが、行単位での指定ができず、テーブル内の全ての行に指定バリデーションが設定されてしまいます。

 

行単位での設定はできないのでしょうか。

 

実現したいのは、テーブルの1行の中でラジオボタンの選択値によって、同じ行の別項目を条件付必須にする仕組みです。

[Legacy_Account1740 (江田篤史（Legacy Account）)]

t.yさん

お世話になっております。

バリデーションの行単位の指定は困難かと思います。

代替案として、テーブル全体にバリデーションを設定するというのははいかがでしょうか。
どの行がエラーになっているかはわかりにくくなってしまいますが、不十分なデータの回答を防ぐことは可能かと思います。

const tableCode = 'table'; //テーブルのフィールドコード
const radioCode = 'radio_button'; //ラジオボタンのフィールドコード
const conditionalRequiredCode = 'text'; //条件必須のフィールドコード
fb.events.form.created.push((state) => {
  state.fields.find(
    ({code}) => code === tableCode
  ).validations.push({
    rule: 'table_validation'
  })
});
fb.addValidators = () => ({
  table_validation: {
    getMessage() {
      return 'ラジオボタンでAを選択した行は、条件必須フィールドに値を入力する必要があります';
    },
    validate(value) {
      return value.every((row) => row.value[radioCode].value !== 'A' || row.value[conditionalRequiredCode].value)
    }
  }
});

[Legacy_Account390 (t.y（Legacy Account）)]

江田様

ご回答をくださり、ありがとうございます。

 

頂戴したコードを元にテーブル単位でのバリデーションの実現に成功いたしました。

ご指摘どおりテーブル全体が赤くなってしまうデメリットもありますが、メッセージでカバーできると思います。

行ごとのT/Fを含めた、テーブル用のカスタムバリデーションを作成する手法に目から鱗でした。

条件付き必須項目が他にもあるのですが、この方法だと問題なく制御できますね。

 

早々に解決いただき、大変助かりました。お礼申し上げます。