Form rendering: 2-way binding extention to `lit-html`

[vlukashov]

This approach to reactive form rendering depends on the lit-html library. Vaadin Form comes with a custom form directive and an extention to the lit-html syntax to allow 2-way data binding.

• In order to render a Vaadin Form one needs to define a lit-html template for it, and use the form directive with a custom 2-way data binding syntax in that template
• The directive has 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">
      <label>User Name <input type="text" !value=${form.username}></label>
      ${form.username.touched && form.username.invalid
        ? html`<p class="error">${form.username.message}</p>`
        : ''}
    </div>

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