Как проверить, изменились ли данные в форме Form Toolkit?

Разработка
1

Продолжение обсуждения из Набор инструментов Discourse для рендеринга форм: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 может быть undefined до регистрации формы
    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 лайка