How to see if form toolkit data is dirty?

Dev
1

Continuing the discussion from Discourse toolkit to render forms:slight_smile:

I’m wanting my save button to be available only when there is something to save.

Searching for isDirty in all-the-plugins finds nothing. The only place I see it in core is in the toolkit.

Surely there is some way to see if a save button should be active.

I’ve got this:


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 might be undefined until the form registers
    console.log("submitDisabled", this);
    return !this.formApi?.isDirty;
  }

....

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

and this (I’ve tried a bunch of things):

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

I’ve been unable to figure out how to see if the data are changed to know to save them. I don’t understand why I can’t find an example of this. I tried a bunch of things that seem like the example in the documentation, but none of them worked.

I tried looking at the admin setttings pages, which I know show a save button only if data are changed, but it seems not to use the forms toolkit.

I see that my registerAPI(api) function is being called, but don’t see isDirty in it:

image
image219×244 10.5 KB

Then when I log it, it looks like it’s just text?

image
image214×244 9.94 KB

Of course isDirty is when I want the button enabled, not disabled, but other examples I got (probably from ask.discourse.com told me to do something like @disabled={{not this.isDirty}} and there’s no such thing as not, so for now I’d be happy if it worked backward.

2 Likes