Form

fds-form is a component used to collect user input from fds interactive controls such as : fds-textfield, fds-select, fds-checkbox ...

The form fields that have constraints defined will be automatically validated when the fds form is submitted and a default error message will be shown for any invalid form field.

Usage

Import

npm i @finastra/form

import '@finastra/form';
...
  <fds-form id="myForm">
      <fds-textfield required label="Name" placeholder="Name" validationMessage="required field"></fds-textfield>
      <fds-textarea
        required
        label="Bio"
        helper="You can @mention other users and organizations to link to them."
        charcounter="true"
        maxlength="18"
        validationMessage="required field"
        helperPersistent
      ></fds-textarea>

      <div class="actions">
        <fds-button type="submit" label="submit"></fds-button>
        <fds-outlined-button type="reset" label="reset"></fds-outlined-button>
      </div>
  </fds-form>

API

Methods

| Method | Type | |-------------------|--------------------------------| | getFormData | (): FormData | | getFormElements | (): any[] | | handleClick | (event: MouseEvent): boolean | | reportValidity | (): boolean | | reset | (): void | | submit | (): boolean |

Events

| Event | Description | |--------------|-------------------------------------| | formReset | Emitted when the form is reset. | | formSubmit | Emitted when the form is submitted. |