I have a dialog which contains form in body and save and cancel buttons in footer. the form in the body section contains binder which is mapped with input fields. I want to validate the binder and save on button click. How to call save to child component ?

    render() {
        return html`
            <vaadin-dialog 
                    header-title="Create new request"
                    .opened="${this.opened}"
                    @opened-changed="${(e: CustomEvent) => (this.opened = e.detail.value)}"
                    ${dialogRenderer(() => html`<create-request-form></create-request-form>`)}
                    ${dialogFooterRenderer(this.renderFooter)}>
            </vaadin-dialog>
        `;
    }

CodePudding user response：

You should actually reveal the code behind renderFooter function.

I would assume you have defined the save button there, e.g.

    <vaadin-button
      theme="primary"
      @click=${this.save}
      ?disabled=${this.binder.invalid}
      "Save"
    </vaadin-button>

And then the save function uses to save it somewhere, directly to the end point or via view store depending how you have designed it. In both cases the main point is that submitTo function first performs the validation and conditionally if passed, calls the given callback function using the object bound to binder as a parameter.

  async save() {
    await this.binder.submitTo(viewStore.save);
    this.binder.clear();
  }

I think spliting of the logic so that form with binder is its own component may be un-necessary, and instead you should consider just using function that returns the html. That would keep tightly related pieces in the same unit.