Form rendering: a custom `lit-html` directive

[vlukashov]

This approach to reactive form rendering depends on the lit-html library. Vaadin Form comes with a set of custom directives for lit-html that allow linking DOM elements to a form instance and using the form properties in the template.

• In order to render a Vaadin Form one needs to define a lit-html template for it, and use the form and form.field directives in that template
• The directives have a renderer parameter which is either a static template, or a renderer function (as described above).
• The form properties are provided into the renderer() function as a parameter.
• The form reacts to user input, updates its properties and calls the renderer() function on every change.
• The renderer() function is expected to return a lit-html's TemplateResult object.

import { VaadinForm } from '@vaadin/form';
import { html } from 'lit-html';

const form = new VaadinForm();

const template = html`
  ${form(form => html`
    <!-- well-known form inputs just work -->
    <div class="form-field">
      ${form.field(field => html`
        <label>User Name <input type="text" name="username"></label>
        ${field.touched && field.invalid
          ? html`<p class="error">${field.message}</p>` : ''}
      `)}
    </div>

    <!-- arbitrary form inputs need explicit bindings between
         the DOM and the Vaadin Form's field instance -->
    <div class="form-field">
      ${form.field(field => html`
        <x-custom-form-field
          name="customProp"
          .value=${field.value}
          @input=${field.onInput}
          @change=${field.onChange}
          @blur=${field.onBlur}
          @focus=${field.onFocus}
        ></x-custom-form-field>
      `)}
    </div>

    <button @click=${form.submit} ?disabled=${!form.canSubmit}>
      Submit
    </button>
  `)}
`;