【フォームブリッジ】テーブルの行単位での制御

[tanaka4189 (TTL=64)]

kViewerのMyページからフォームブリッジを呼び出した際に、以下のような制御を行いたい

テーブルには申請日と、完了（チェックボックス）があります。
完了にチェックが入っていれば申請日は変更不可、入っていなければ変更可能
これを行単位で制御したい。

(function () {
    "use strict";
    fb.events.kviewer.record.mapped = [function (state) {

        const record = state.record;

        for (let i = 0; i < record.テーブル.value.length; i++) {
            if (record.テーブル.value[i].value.完了.value === '完了') {
                record.テーブル.value[i].value.申請日.disabled = true;
            } else {
                record.テーブル.value[i].value.申請日.disabled = false;
            }

        }

        return state;
    }]
}());

エラーは出ていませんが制御できていません。

問題点等お気づきの点がございましたら、ご教授いただきますようお願いいたします。

[aaa]

fb.events.kviewer.record.mapped
のイベントを使うと以下のようなエラーが出ました。
細かい設定が質問者と同じになっていないのかも知れません。

(() => {
    "use strict";
    fb.events.form.mounted = [state => {

        const record = state.record;

        record.テーブル.value.forEach((row, i) => {
            if (row.value.チェックボックス.value[0] === '完了') {
                console.log("完了");
                const tableRowElement = fb.getTableElementsByCode('テーブル', '申請日')[i];
                const inputElement = tableRowElement.querySelector('input');
                if (inputElement) {
                    inputElement.disabled = true;
                }
            } else {
                console.log("未完了");
            }
        });

        return state;
    }];
})();

formbridge上で完了、未完了を変更できてしまうのですがこれが希望した結果なのか？よくわかりませんでした。

[tanaka4189 (TTL=64)]

ご返信ありがとうございます。
このエラーが出る場合は setTimeout で回避できました。
しかしながらfb.events.kviewer.record.mappedでもfb.events.form.mountedでも制御ができませんでした。
申請日のフィールドコードのタイプが日付になっているためと思われます？文字列で試してみましたところ制御は出来ているようです。制御したいのはタイプが日付のフィールドです。
引き続き気が付く点等ございましたらよろしくお願いいたします。

参考にしてこちらのコードで試してみました

(() => {
    "use strict";
    fb.events.kviewer.record.mapped = [state => {

        const record = state.record;

        setTimeout(function () {



            record.テーブル.value.forEach((row, i) => {
                if (row.value.完了.value[0] === '完了') {
                    console.log("完了");
                    const tableRowElement = fb.getTableElementsByCode('テーブル', '申請日')[i];
                    const inputElement = tableRowElement.querySelector('div[data-vv-name = "テーブル-0-申請日"] input');
                    if (inputElement) {
                        inputElement.disabled = true;
                        console.log(inputElement);
                    }
                } else {
                    console.log("未完了");
                }
            });
        }, 1000);

        return state;
    }];
})();

console.log(inputElement);
のログではdisabled = trueとなるのですが、実際のコードはdisabled が抜けてしまうようです。

[aaa]

制御ができないというのは、disableにしても

日付フィールドをクリックするとカレンダーが表示されてしまう
ということを差していますか？

イベントリスナーが設定されているので、削除する必要があります。

(() => {
    "use strict";
    fb.events.form.mounted = [state => {

        const record = state.record;

        record.テーブル.value.forEach((row, i) => {
            if (row.value.チェックボックス.value[0] === '完了') {
                console.log("完了");
                const tableRowElement = fb.getTableElementsByCode('テーブル', '日付')[i];
                const inputElement = tableRowElement.querySelector('input');
                if (inputElement) {
                    inputElement.disabled = true;
                    const clonedElement = inputElement.cloneNode(true);
                    inputElement.replaceWith(clonedElement);
                }
            } else {
                console.log("未完了");
            }
        });

        return state;
    }];
})();

[tanaka4189 (TTL=64)]

aaa様
お手数をおかけいたしました。大変勉強になりました。
無事思うような仕様になりました。本当にありがとうございました。