Form Toolkit 데이터가 수정되었는지 확인하는 방법

개발
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는 폼이 등록될 때까지 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가 true일 때 버튼이 활성화되어야 하는 것이지 비활성화되어야 하는 것이 아닙니다. 하지만 제가 받은 다른 예제들(아마도 ask.discourse.com에서 가져온 것들)은 @disabled={{not this.isDirty}} 같은 것을 하라고 했는데, not이라는 것은 존재하지 않습니다. 그래서 지금은 역으로 작동하더라도 상관없습니다.

2개의 좋아요