142 lines
4.7 KiB
Text
142 lines
4.7 KiB
Text
import { Story, Meta, html } from '@open-wc/demoing-storybook';
|
|
import { Required, MaxLength, loadDefaultFeedbackMessages } from '@lion/validate';
|
|
import '@lion/fieldset/lion-fieldset.js';
|
|
import '@lion/input/lion-input.js';
|
|
import '@lion/form/lion-form.js';
|
|
|
|
<Meta title="Forms/Form/Examples" parameters={{ component: 'lion-form' }} />
|
|
|
|
# Form Examples
|
|
|
|
A form can have multiple nested fieldsets.
|
|
|
|
<Story name="Default">
|
|
{html`
|
|
<lion-form id="form">
|
|
<form>
|
|
<lion-fieldset label="Personal data" name="personalData">
|
|
<lion-fieldset label="Full Name" name="fullName">
|
|
<lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
|
|
<lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
|
|
</lion-fieldset>
|
|
<lion-fieldset label="Location" name="location">
|
|
<lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
|
|
<lion-input name="city" label="City" .modelValue=${'Amsterdam'}></lion-input>
|
|
</lion-fieldset>
|
|
<lion-input name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></lion-input>
|
|
</lion-fieldset>
|
|
<button type="button" @click=${() => console.log(document.querySelector('#form').serializeGroup())}>
|
|
Log to Action Logger
|
|
</button>
|
|
</form>
|
|
</lion-form>
|
|
`}
|
|
</Story>
|
|
|
|
```html
|
|
<lion-form id="form">
|
|
<form>
|
|
<lion-fieldset label="Personal data" name="personalData">
|
|
<lion-fieldset label="Full Name" name="fullName">
|
|
<lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
|
|
<lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
|
|
</lion-fieldset>
|
|
<lion-fieldset label="Location" name="location">
|
|
<lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
|
|
<lion-input name="city" label="City" .modelValue=${'Amsterdam'}></lion-input>
|
|
</lion-fieldset>
|
|
<lion-input name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></lion-input>
|
|
</lion-fieldset>
|
|
<button type="button" @click=${() => console.log(document.querySelector('#form').serializeGroup())}>
|
|
Log to Action Logger
|
|
</button>
|
|
</form>
|
|
</lion-form>
|
|
```
|
|
|
|
## Form Submit / Reset
|
|
|
|
You can control whether a form gets submitted based on validation states.
|
|
Same thing goes for resetting the inputs to the original state.
|
|
|
|
<Story name="Submit/reset">
|
|
{() => {
|
|
loadDefaultFeedbackMessages();
|
|
const submit = () => {
|
|
const form = document.querySelector('#form2');
|
|
if (!form.hasFeedbackFor.includes('error')) {
|
|
console.log(form.serializeGroup());
|
|
form.resetGroup();
|
|
}
|
|
};
|
|
return html`
|
|
<lion-form id="form2" @submit="${submit}"
|
|
><form>
|
|
<lion-fieldset label="Name" name="name">
|
|
<lion-input
|
|
name="firstName"
|
|
label="First Name"
|
|
.validators=${[new Required(), new MaxLength(15)]}
|
|
>
|
|
</lion-input>
|
|
<lion-input
|
|
name="lastName"
|
|
label="Last Name"
|
|
.validators=${[new Required(), new MaxLength(15)]}
|
|
>
|
|
</lion-input>
|
|
</lion-fieldset>
|
|
<button type="submit">Submit & Reset (if successfully submitted)</button>
|
|
<button type="button" @click=${() => document.querySelector('#form2').resetGroup()}>
|
|
Reset
|
|
</button>
|
|
<p>
|
|
A reset button should never be offered to users. This button is only used here to
|
|
demonstrate the functionality.
|
|
</p>
|
|
</form></lion-form
|
|
>
|
|
`;
|
|
}}
|
|
</Story>
|
|
|
|
```js
|
|
import { Required, MaxLength } from '@lion/validate'
|
|
|
|
const submit = () => {
|
|
const form = document.querySelector('#form2');
|
|
if (!form.hasFeedbackFor.includes('error')) {
|
|
console.log(form.serializeGroup());
|
|
form.resetGroup();
|
|
}
|
|
};
|
|
```
|
|
|
|
```html
|
|
<lion-form id="form2" @submit="${submit}">
|
|
<form>
|
|
<lion-fieldset label="Name" name="name">
|
|
<lion-input
|
|
name="firstName"
|
|
label="First Name"
|
|
.validators=${[new Required(), new MaxLength(15)]}
|
|
>
|
|
</lion-input>
|
|
<lion-input
|
|
name="lastName"
|
|
label="Last Name"
|
|
.validators=${[new Required(), new MaxLength(15)]}
|
|
>
|
|
</lion-input>
|
|
</lion-fieldset>
|
|
<button type="submit">Submit & Reset (if successfully submitted)</button>
|
|
<button type="button" @click=${() => console.log(document.querySelector('#form2'))}>
|
|
Reset
|
|
</button>
|
|
<p>
|
|
A reset button should never be offered to users. This button is only used here to
|
|
demonstrate the functionality.
|
|
</p>
|
|
</form>
|
|
</lion-form>
|
|
```
|