lion/packages/form/stories/index.stories.mdx

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.js';
import './helpers/demo-form-child.js';

<Meta title="Forms/Form" parameters={{ component: 'lion-form' }} />

# Form

`lion-form` is a webcomponent that enhances the functionality of the native `form` component.
It is designed to interact with (instances of) the [form controls](?path=/docs/forms-system-overview).

<Story name="Default">
  {html`
    <lion-form id="form">
      <form>
        <lion-fieldset label="Personal data" name="personalData">
          <lion-fieldset label="Full Name" name="fullName">
            <demo-form-child name="firstName" label="First Name" .modelValue=${'Foo'}></demo-form-child>
            <demo-form-child name="lastName" label="Last Name" .modelValue=${'Bar'}></demo-form-child>
          </lion-fieldset>
          <lion-fieldset label="Location" name="location">
            <demo-form-child name="country" label="Country" .modelValue=${'Netherlands'}></demo-form-child>
            <demo-form-child name="city" label="City" .modelValue=${'Amsterdam'}></demo-form-child>
          </lion-fieldset>
          <demo-form-child name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></demo-form-child>
        </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">
        <demo-form-child name="firstName" label="First Name" .modelValue=${'Foo'}></demo-form-child>
        <demo-form-child name="lastName" label="Last Name" .modelValue=${'Bar'}></demo-form-child>
      </lion-fieldset>
      <lion-fieldset label="Location" name="location">
        <demo-form-child name="country" label="Country" .modelValue=${'Netherlands'}></demo-form-child>
        <demo-form-child name="city" label="City" .modelValue=${'Amsterdam'}></demo-form-child>
      </lion-fieldset>
      <demo-form-child name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></demo-form-child>
    </lion-fieldset>
    <button type="button" @click=${() => console.log(document.querySelector('#form').serializeGroup())}>
      Log to Action Logger
    </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](?path=/docs/forms-system-interaction-states)
- Registration mechanism for [form controls](?path=/docs/forms-system-overview)
- Accessible out of the box

For more information about fields that are designed for lion-form, please read
[Forms](?path=/docs/forms-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">
            <demo-form-child
              name="firstName"
              label="First Name"
              .validators=${[new Required(), new MaxLength(15)]}
            >
            </demo-form-child>
            <demo-form-child
              name="lastName"
              label="Last Name"
              .validators=${[new Required(), new MaxLength(15)]}
            >
            </demo-form-child>
          </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">
      <demo-form-child
        name="firstName"
        label="First Name"
        .validators=${[new Required(), new MaxLength(15)]}
      >
      </demo-form-child>
      <demo-form-child
        name="lastName"
        label="Last Name"
        .validators=${[new Required(), new MaxLength(15)]}
      >
      </demo-form-child>
    </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>
```