OD Forms

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

<od-form> 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.

<od-form-array> 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.

<od-form-input> 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.

<od-form-textarea> 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.

<od-form-selectlist> 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.

<od-form-multiselect> 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.

<od-form-radioselect> 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.

<od-form-richtext> 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';

<od-form id='od-form1'>                 //unique id required
    <od-form-input  name='first-name'   //required
                    autocomplete='given-name'>First Name: </od-form-input>
    
    <od-form-textarea   name='textarea'>Textarea: </od-form-textarea>

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

    <od-form-multiselect    name='multi'
                            options-get='http://myapiroute.com/api/options'
                            options-label='optionName'
                            options-value='id'>
        <label slot='label'>Multi:</label>
        <od-form-input  value='1st'>1st: </od-form-input> //statically defined option
    </od-form-multiselect>
                
    <od-form-radioselect    name='radio'
                            options-get='http://myapiroute.com/api/options'
                            options-label='optionName'
                            options-value='id'>
        <label slot='label'>Radio:</label>
        <od-form-input  value='1st'>1st: </od-form-input>
    </od-form-radioselect>
</od-form>

<od-form-array id='od-form-array1'>                 //unique id required
    <od-form-input  name='first-name'               //required
                    autocomplete='given-name'>First Name: </od-form-input>
    
    <od-form-textarea   name='textarea'>Textarea: </od-form-textarea>
                
    <od-form-radioselect    name='radio'
                            options-get='http://myapiroute.com/api/options'
                            options-label='optionName'
                            options-value='id'>
        <label slot='label'>Radio:</label>
        <od-form-input  value='1st'>1st: </od-form-input>
    </od-form-radioselect>
</od-form-array>

//  **Also supports any other OD Form Element**

Attributes

OD Form

| 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

OD Form Array

| 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 |

OD Form Input

| 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

OD Form Textarea

| 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

OD Form Selectlist

| 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

OD Form Multiselect

| 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

OD Form Radioselect

| 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

OD Form Richtext

| 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

OD Form

| 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 |

OD Form Array

| 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 |

OD Form Input

| 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 |

OD Form Textarea

| 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 |

OD Form Selectlist

| 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' |

OD Form Multiselect

| 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' |

OD Form Radioselect

| 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' |

OD Form Richtext

| 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

OD Form

| 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. |

OD Form Array

| 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 |

Any Form Element

| 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

Run development server and show demo

npm run demo

Run linter

npm run lint

Fix linter errors

npm run fix

Build for production

npm run build