Form Connector

Under the hood it initializes whole form management mechanism. It wraps a html <form> element that must have at least an id and an action attributes.

It accepts a submitStrategy attribute that defines how form submission is handled in terms of request/response shape. By default, it uses a html strategy, so we submit our form with FormData and from response that is a html page, we extract only these form and swap out with previous one. So we don't rerender whole document.

Attributes

Attribute name	Type	Default	Description
submitStrategy	string	html	defines how form submission is handled.

Properties

Property name	Type	Description
formController	IFormController	Lit controller that take cares of whole form management mechanism initialization.
formService	IFormService	Proxies from FormConnector, it provides several methods that allow use to manage form and control data manually. For more information, check out here.

DOM Events

This webcomponent dispatches the following DOM events:

• submit
• submitError
• formInvalid

Example

Complete form example

<form-connector>
    <form id="login-form" action="/login" method="post">
        <control-connector required>
            <label for="login">

                login

                <input
                    type="text"
                    id="login"
                    name="login"
                />
            </label>

            <control-errors></control-errors>
        </control-connector>

        <control-connector required>
            <label for="password">

                password

                <input
                    type="password"
                    id="password"
                    name="password"
                />
            </label>

            <control-errors>
                <span slot class="js__error-message">
                     Error message
                </span>
            </control-errors>
        </control-connector>

        <button>Submit</button>
    </form>
</form-connector>