Form: Overview
A web component that enhances the functionality of the native form component.
It is designed to interact with (instances of) the form controls.
export const main = () => {
const submitHandler = ev => {
const formData = ev.target.serializedValue;
console.log('formData', formData);
fetch('/api/foo/', {
method: 'POST',
body: JSON.stringify(formData),
});
};
return html`
<lion-form @submit="${submitHandler}">
<form @submit="${ev => ev.preventDefault()}">
<lion-input name="firstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
<lion-input name="lastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
<button>Submit</button>
</form>
</lion-form>
`;
};
Features
- Data synchronization with models
- Easy retrieval of form data based on field names
- Advanced validation possibilities
- Advanced user interaction scenarios via interaction states
- Registration mechanism for form controls
- Accessible out of the box
For more information about fields that are designed for our form, please read form system.
Installation
npm i --save @lion/ui
import '@lion/ui/define/lion-form.js';