API access: JS classes `VaadinForm` and `VaadinFormField`

[vlukashov]

This is a code-first approach to the API. It is intended for use with a statically typed language like TypeScript because in order for type-checker to work with forms they need to be declared in TypeScript, not in HTML. Depending on the implementation choices this approach may be combined with a templating library like lit-html.

• In order to use the Vaadin Form APIs one would need to create an instance of the VaadinForm class in their JavaScript / TypeScript code.
• Individual form fields would be created using the VaadinFormField class.
• The library functionality is exposed via JavaScript properties and methods.

• The link between the form controls (DOM elements) and the Vaadin Form instance needs to be established separately. There are several approaches to it:

  • link a form instance to the existing DOM using document.querySelector()

    <form id="myform">
    <label>User Name <input type="text" name="username"></label>
    <input type="submit" value="Submit">
    </form>

    import { VaadinForm } from '@vaadin/vaadin-form';
    
    const form = new VaadinForm(document.getElementById('myform'));
    form.addSubmitHandler((e) => this.onSubmit(e));

  • link DOM elements to a form instance in a template when using a library like lit-html

    import { VaadinForm } from '@vaadin/vaadin-form';
    import { html } from 'lit-html';
    
    const form = new VaadinForm();
    
    html`<form>
    ${form(html`
      <label>User Name <input type="text" name="username"></label>
      <input ?disabled=${!form.canSubmit} type="submit" value="Submit">
    `)}
    </form>`;

  • define a form in JavaScript first, and then let it create the DOM it needs

    import { VaadinForm, NativeTextField } from '@vaadin/vaadin-form';
    
    const form = new VaadinForm();
    form.addField(new NativeTextField({
    label: 'User Name',
    name: 'username'
    });
    form.render(document.getElementById('myform'));