OD Forms

> A series of components to make building html forms fast and easy.
> NEW in 8.2.0: Dynamic labels!

is a smart component to wrap other OD Form elements. It offers a series of benefits over semantic html forms while maintaining the ability to interact as one would normally with an html form. Supports semantic html attributes.

is a smart component to wrap other OD Form elements. It creates a series of od-form elements based on a template to return an array of data. It also allows for simple creation and deletion of entries.

is a simple component to create an input element. Like other Form Elements it comes with a series of styling and functional benefits including built in labels and semantic html attributes.

is a simple component to create a textarea element. Like other Form Elements it comes with a series of styling and functional benefits including built in labels and semantic html attributes.

is a simple component to create a select element. Like other Form Elements it comes with a series of styling and functional benefits including built in labels and semantic html attributes. Supports both dynamic options and statically defined options.

is a simple component to create a series of checkbox elements. Like other Form Elements it comes with a series of styling and functional benefits including built in labels and semantic html attributes. Supports both dynamic options and statically defined options.

is a simple component to create a series of radio elements. Like other Form Elements it comes with a series of styling and functional benefits including built in labels and semantic html attributes. Supports both dynamic options and statically defined options.

is a simple component to create custom richtext field. Like other Form Elements it comes with a series of styling and functional benefits including built in labels and semantic html attributes.

Installation

- Install with npm

``
npm i @orcden/od-forms
`

Usage

Please note that your usage may differ depending on your framework
`
import { OdForm, OdFormInput } from '@orcden/od-forms';
`
`
//unique id required
autocomplete='given-name'>First Name:

Textarea:

options-get='http://myapiroute.com/api/options' //returns [{ optionName: 'option 1', id: '0' },...]
options-label='optionName'
options-value='id'>
Select1:
- //statically defined option


options-get='http://myapiroute.com/api/options'
options-label='optionName'
options-value='id'>
Multi:
1st: //statically defined option


options-get='http://myapiroute.com/api/options'
options-label='optionName'
options-value='id'>
Radio:
1st:


`
`
//unique id required
autocomplete='given-name'>First Name:

Textarea:

options-get='http://myapiroute.com/api/options'
options-label='optionName'
options-value='id'>
Radio:
1st:



// Also supports any other OD Form Element
`

Attributes

$3

| Attribute | Type | Default | Description |
|-----------|---------|---------|-----------------------------------------------------------------------------------------|
| disabled| Boolean | false | Toggles the hiding of the input fields and the display of the value fields. |
| inline | Boolean | false | Tells the form to display all of its elements in a single line. Overrides child element inline attributes |
** Also supports any semantic html form attribute

$3

| Attribute | Type | Default | Description |
|-----------|---------|---------|-----------------------------------------------------------------------------------------|
| disabled| Boolean | false | Toggles the hiding of the input fields and the display of the value fields. |
| inline | Boolean | false | Tells all child forms to display all of its elements in a single line. Overrides child element inline attributes |

$3

| Attribute | Type | Default | Description |
|-----------|---------|---------|-----------------------------------------------------------------------------------------|
| inline | Boolean | false | Tells the element to align its input field inline with its label field |
| value | String | undefined | Two-way binding support to set/get the html input value property |
| checked | Boolean | false | Two-way binding support to set/get the html input checked property |
** Also supports any semantic html input attribute

$3

| Attribute | Type | Default | Description |
|-----------|---------|---------|-----------------------------------------------------------------------------------------|
| inline | Boolean | false | Tells the element to align its input field inline with its label field |
| value | String | undefined | Two-way binding support to set/get the html input value property |
** Also supports any semantic html input attribute

$3

| Attribute | Type | Default | Description |
|----------------|---------|---------|-----------------------------------------------------------------------------------------|
| inline | Boolean | false | Tells the element to align its input field inline with its label field |
| options-get | String | null | For dynamic options calls. This is the url of your option route |
| options-label| String | null | For dynamic options calls. This is the field identifier that corresponds to your option's label field ex. 'optionName'|
| options-value| String | null | For dynamic options calls. This is the field identifier that corresponds to your option's value field ex. 'id' |
** Also supports any semantic html input attribute

$3

| Attribute | Type | Default | Description |
|----------------|---------|---------|-----------------------------------------------------------------------------------------|
| inline | Boolean | false | Tells the element to align its input field inline with its label field |
| options-get | String | null | For dynamic options calls. This is the url of your option route |
| options-label| String | null | For dynamic options calls. This is the field identifier that corresponds to your option's label field ex. 'optionName'|
| options-value| String | null | For dynamic options calls. This is the field identifier that corresponds to your option's value field ex. 'id' |
** Also supports any semantic html input attribute

$3

| Attribute | Type | Default | Description |
|----------------|---------|---------|-----------------------------------------------------------------------------------------|
| inline | Boolean | false | Tells the element to align its input field inline with its label field |
| options-get | String | null | For dynamic options calls. This is the url of your option route |
| options-label| String | null | For dynamic options calls. This is the field identifier that corresponds to your option's label field ex. 'optionName'|
| options-value| String | null | For dynamic options calls. This is the field identifier that corresponds to your option's value field ex. 'id' |
** Also supports any semantic html input attribute

$3

| Attribute | Type | Default | Description |
|----------------|---------|---------|-----------------------------------------------------------------------------------------|
| disabled | Boolean | false | Hides the input field and |
| inline | Boolean | false | Tells the element to align its input field inline with its label field |
| required| Boolean | false | Lets the form know that the field needs a value before continuing |

Properties

$3

| Property | Type | Default | Description |
|-----------|-----------------|-----------------|-----------------------------------------------------------------------------------------|
| form | HTMLFormElement | HTMLFormElement | Get only. Returns the created html form. Can be used for any semantic html form hooks |
| disabled| Boolean | false | Toggles the hiding of the input fields and the display of the value fields. |
| inline | Boolean | false | Tells the form to display all of its elements in a single line. Overrides child element inline attributes |

$3

| Property | Type | Default | Description |
|-----------|-----------------|-----------------|-----------------------------------------------------------------------------------------|
| forms | Array | Array | Get only. Returns an array of the created html forms. Can be used for any semantic html form hooks |
| disabled| Boolean | false | Toggles the hiding of the input fields and the display of the value fields. |
| inline | Boolean | false | Tells the form to display all of its elements in a single line. Overrides child element inline attributes |

$3

| Property | Type | Default | Description |
|-------------|-----------------|-----------------|-----------------------------------------------------------------------------------------|
| input | HTMLInputElement| HTMLInputElement| Get only. Returns the created html input. Can be used for any semantic html form hooks. |
| labelText | String | String '' | Returns the text of the created html label. Can be used to set label text |
| inline | Boolean | false | Tells the element to align its input field inline with its label field |
| value | String | undefined | get/set the html input value property |
| checked | Boolean | false | get/set the html input checked property |

$3

| Property | Type | Default | Description |
|-------------|-----------------|-----------------|-----------------------------------------------------------------------------------------|
| input | HTMLInputElement| HTMLInputElement| Get only. Returns the created html input. Can be used for any semantic html form hooks. |
| labelText | String | String '' | Returns the text of the created html label. Can be used to set label text |
| inline | Boolean | false | Tells the element to align its input field inline with its label field |
| value | String | undefined | get/set the html input value property |

$3

| Property | Type | Default | Description |
|----------------|-----------------|-----------------|-----------------------------------------------------------------------------------------|
| input | HTMLInputElement| HTMLInputElement| Get only. Returns the created html input. Can be used for any semantic html form hooks. |
| labelText | String | String '' | Returns the text of the created html label. Can be used to set label text |
| inline | Boolean | false | Tells the element to align its input field inline with its label field |
| value | String | undefined | get/set the current selected value |
| optionsGet | String | null | For dynamic options calls. This is the url of your option route |
| optionsLabel | String | null | For dynamic options calls. This is the field identifier that corresponds to your option's label field ex. 'optionName'|
| optionsValue | String | null | For dynamic options calls. This is the field identifier that corresponds to your option's value field ex. 'id' |

$3

| Property | Type | Default | Description |
|----------------|-----------------|-----------------|-----------------------------------------------------------------------------------------|
| inputs | Array |Array | Get only. Returns an array of the nested inputs. Can be used for any semantic html form hooks. |
| labelText | String | String '' | Returns the text of the created html label. Can be used to set label text |
| inline | Boolean | false | Tells the element to align its input field inline with its label field |
| value | String/Array | undefined | get/set the current selected values |
| optionsGet | String | null | For dynamic options calls. This is the url of your option route |
| optionsLabel | String | null | For dynamic options calls. This is the field identifier that corresponds to your option's label field ex. 'optionName'|
| optionsValue | String | null | For dynamic options calls. This is the field identifier that corresponds to your option's value field ex. 'id' |

$3

| Property | Type | Default | Description |
|----------------|-----------------|-----------------|-----------------------------------------------------------------------------------------|
| inputs | Array |Array | Get only. Returns an array of the nested inputs. Can be used for any semantic html form hooks. |
| labelText | String | String '' | Returns the text of the created html label. Can be used to set label text |
| inline | Boolean | false | Tells the element to align its input field inline with its label field |
| value | String | undefined | get/set the current selected value |
| optionsGet | String | null | For dynamic options calls. This is the url of your option route |
| optionsLabel | String | null | For dynamic options calls. This is the field identifier that corresponds to your option's label field ex. 'optionName'|
| optionsValue | String | null | For dynamic options calls. This is the field identifier that corresponds to your option's value field ex. 'id' |

$3

| Property | Type | Default | Description |
|-------------|-----------------|-----------------|-----------------------------------------------------------------------------------------|
| input | HTMLInputElement| HTMLInputElement| Get only. Returns the created html input. Can be used for any semantic html form hooks. |
| labelText | String | String '' | Returns the text of the created html label. Can be used to set label text |
| inline | Boolean | false | Tells the element to align its input field inline with its label field |
| value | String | undefined | get/set the html input value property |
| editor | Quill | Quill | Get only. Returns the Quill inhstance for any required hooks |

Functions

$3

| Name | returns | Parameters | Description |
|-----------|-----------|-------------|-----------------------------------------------------------------------------------------|
| submitForm | undefined | None | Triggers an html submit event on the html form with custom validation. |
| htmlSubmitForm | undefined | None | Triggers an html submit event on the html form with html validation. |
| reset | undefined | None | Triggers a reset/clearing of the form data |
| validate| Boolean | None | Cycles through inputs and validates each one. |
| htmlValidate| Boolean | None | Triggers an html validation of the form. |
| getData | Object | None | Returns a JSON Object of the FormData associated with the html form. |
| getValue| Object | String name | Returns the current value in the form associated with the given name parameter |
| setValue| undefined | String name, Object data | Sets the value in the form associated with the given name parameter |
| setChecked| undefined | String name, String value, Boolean isChecked | Sets the associated checkbox or radio in the form associated with the given name parameter |
| populate| undefined | Object data | Populates the form with data based on a simple JSON Object. |
| saveAutocomplete | undefined | None | Triggers the form to save autocomplete data in the browser. |

$3

| Name | returns | Parameters | Description |
|--------------|-------------|-------------|-----------------------------------------------------------------------------------------|
| addNewEntry| HTMLElement | None | Adds a new form based on the template to the DOM. |
| deleteEntry| undefined | Sting id | Deletes the corresponding form entry from the DOM .|
| validate | Boolean | None | Cycles through form entries and validates each one. |
| getData | Array | None | Returns a JSON Array of the FormData associated with the html form entries. |
| populate | undefined | Object data | Populates the form with data based on a simple JSON Array. |
| reset | undefined | None | Triggers a reset/clearing of all data in each form |

$3

| Name | returns | Parameters | Description |
|--------------|-------------|-------------|-----------------------------------------------------------------------------------------|
| listen | undefined | eventName, callback | Adds an event listener to the form element in the ssame way you would a normal listener |

Styling

- CSS variables are available to alter the default styling provided

| Shadow Part | Description |
|----------------|-------------|
| form | Selects the html form |
| table | The table used for aligning labels and inputs |
| table-row | Rows under the table part |
| table-cell | Cells under the rows part |
| label-cell | Cells under the rows part containing the field label |
| input-cell | Cells under the rows part containing the input element |
| field-label | The labels used for identifying separate fields |
| value-label | The labels used in place of the inputs to display the current value |
| form-input | Selects inputs in the html form |
| form-select | Selects 'select' elements in the html form |
| form-textarea | Seelects Textareas in the form |
| --ARRAY ONLY-- | |
| array-container| The div used to insert new forms |
| array-fieldset | Selects the wrapper fieldset around each form
| od-form | Selects the OD Form Elements nested in each fieldset |
| add-button | The add button used to add new entries |
| delete-button | The button used to delete corresponding entries |

Development

$3

`
npm run demo
`

$3

`
npm run lint
`

$3

`
npm run fix
`

$3

`
npm run build
``