如何查看表单工具包数据是否已更改？

开发
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 在表单注册之前可能未定义
    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 个赞