フォームツールキットのデータがダーティかどうかを確認する方法

開発
1

Discourse toolkit to render forms:slight_smile: の議論の続きです。

保存すべきものがある場合にのみ、保存ボタンを有効にしたいと考えています。

isDirty をすべてのプラグインで検索しても何も見つかりません。コアで見かける唯一の場所はツールキット内です。

保存ボタンをアクティブにするべきかどうかを確認する方法は必ずあるはずです。

以下のようなコードがあります。

export default class ServerCreate extends Component {
  @tracked formApi = null;
  @tracked isDirty = false;

  @action
  registerAPI(api) {
    console.log("registerAPI called", api);
    this.formApi = api;

    // api.onChange(() => {
    //   console.log("onChange!", api.isDirty);
    //   this.isDirty = api.isDirty;
    // });
  }

  get submitDisabled() {
    // フォームが登録されるまで formApi は未定義の可能性があります
    console.log("submitDisabled", this);
    return !this.formApi?.isDirty;
  }

....

      <Form
        @data={{this.formData}}
        @onRegisterApi={{this.registerAPI}}
        @onSubmit={{this.handleSubmit}}
        as |form|
      >

そして、以下のようなコードです（いろいろ試しました）。

            <form.Submit
              @label="pfaffmanager.server.save_button"
              class="save"
              @icon="check"
              @disabled={{this.registerAPI.isDirty}}
            />

データを変更したかどうかを確認して保存する必要があるかどうかを知ることができませんでした。この種の例が見つからない理由がわかりません。ドキュメントの例のように見えるものをいくつか試しましたが、どれも機能しませんでした。

管理設定ページを見てみましたが、データが変更された場合にのみ保存ボタンが表示されることはわかっていますが、フォームツールキットを使用していないようです。

registerAPI(api) 関数が呼び出されていることはわかりますが、その中に isDirty は見つかりません。

image
image219×244 10.5 KB

そして、それをログに記録すると、単なるテキストのように見えますか？

image
image214×244 9.94 KB

もちろん、ボタンを有効にしたいのは isDirty の場合であり、無効な場合ではありません。しかし、得た他の例（おそらく ask.discourse.com から）では @disabled={{not this.isDirty}} のようなことをするように指示されましたが、not のようなものは存在しないため、今は逆でも機能すれば満足です。

「いいね！」 2