【formbridge】 ドロップダウンリストの必須チェックの動的な変更について

formbridgeのドロップダウンフィールドに、条件に応じて’required’のバリデーションルールを適用、非適用を行いたいと考えています。

if(条件){
field.required = true;
field.validations.push({ rule: 'required' });
}else{
field.required = false;
field.validations = [];
}

上記のとおり実装したところ、false内にて

field.validations = [];

を行っているにも関わらず、必須入力項目として認識されたままとなっています。

 

なお、テキストボックスの場合は、上記のコードで想定通りの動きをしています。

ドロップダウンリストの必須チェックを動的に切り替える方法はありますか。

 

shigeさん

こんにちは。

 

以下組み合わせで動作しますがいかがでしょうか。

条件用フィールド:ドロップダウン

エラーを出したいフィールド:ドロップダウン(こちらがテキストボックスでも問題なかったです)

fb.events.fields.条件判定用フィールド.changed = [function(state) {

  const field = state.fields.filter(function(field) {
      return field.code === 'エラーを出したいフィールド';
    })[0];

  if (state.record.条件判定用フィールド.value == 'エラーにする値') {
        field.required = true;
        field.validations.push({ rule: 'required' });
    } else {
        field.required = false;
        field.validations = [];
    }

    return state;

}];

ご回答ありがとうございます。

お教えいただいたコードを参考に修正してみたのですが、必須入力項目のままでした。

Edgeの開発者ツールで確認してみたところ

field.validations = [];

の行は正常に通過し、validationsの中身も空になっていることを確認できています。

にもかかわらず、ドロップダウンリストの内容を削除すると、下記画像のようになってしまいます。

 

 

念のため確認ですが、フィールド設定上、「実施方法」フィールドの必須項目にチェックは付いていない状態でしょうか。

また、このコード部分以外で「実施方法」フィールドに対してバリデーションを設定しているコードもないでしょうか。

コードを確認してみたのですが、必須項目のチェック、本コード以外からのバリデーション設定は見当たらないように思えます。

しかし、試しにダミーのドロップダウンリストを作成及び同様のコードを書いてみたところ、koichi様のおっしゃる通りの動きをすることが確認できました。私が何か見落としをしているようなので、改めて設定等を確認してみたいと思います。

原因がわかりましたら、改めてコメントを書き込もうと思います。アドバイスいただき、ありがとうございました。

 

原因が判明しました。

「回答内容で表示を制御(条件分岐)」にて、表示/非表示を切り替えるフィールドの中に、当該ドロップダウンリストが含まれていることが原因でした。

当該フィールドを対象から外すことで、無事に必須項目チェックの切り替えが行われるようになりました。

その代わり、条件分岐による表示/非表示ができなくなってしまいましたが、これはコードを記述することで対応しようと思います(私事ですが、必須項目チェックのほうが重要度が高いため)。

条件分岐を行った時の挙動はこういう仕様で正しいのかは気になるところですが、要望を叶えられてひとまず安心しました。

koichi様、アドバイスいただき、ありがとうございました。

ご確認ありがとうございます。
条件分岐が原因でしたか。
解決に繋がり何よりです!

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。