Origami Frontend Components & Services

JSDoc: o-forms

new ErrorSummary(elements)

Class constructor.

parameter type default description
elements (optional) Array An array of objects, where each object describes an invalid input element

Methods

Example

const example = [
	{
		id: 'text-input',
		valid: false,
		error: 'Please fill out this field'
		label: 'Input Label'
	}
	...
	]
	new ErrorSummary(example)

Links

new Forms(formElement, options)

Class constructor.

parameter type default description
formElement (optional) HTMLElement The form element in the DOM
options (optional) Object {} An options object for configuring the form

Methods

Links

new Input(inputElement)

Class constructor.

parameter type default description
inputElement (optional) HTMLElement An input element in the DOM

Methods

Links

new State(inputs)

Class constructor.

parameter type default description
inputs (optional) RadioNodeList A NodeList of radio input elements

Methods

Links

ErrorSummary#createSummary

Instance Method

Generate Node to hold list of invalid inputs

Links

ErrorSummary.createList

Static Method

Generate list of anchors

Links

ErrorSummary.createAnchor(input)

Static Method

Generate anchor element to point at invalid input

parameter type default description
input (optional) Object The input object to construct an anchor for

Links

Forms.getDataAttributes(formElement)

Static Method

Get the data attributes from the formElement. If the form is being set up declaratively, this method is used to extract the data attributes from the DOM.

parameter type default description
formElement HTMLElement The message element in the DOM

Links

Forms#handleEvent(event)

Instance Method

Event Handler

parameter type default description
event Object The event emitted by element/window interactions

Links

Forms#validateFormInputs

Instance Method

Form validation Validates every element in the form and creates input objects for the error summary

Links

Forms#setState(name, state)

Instance Method

Input state

parameter type default description
name (optional) String name of the input fields to add state to
state (optional) String type of state to apply — one of 'saving', 'saved', 'none'

Links

Forms#destroy

Instance Method

Destroy form instance

Links

Forms.init(rootElement, options)

Static Method

Initialise form component.

parameter type default description
rootElement HTMLElement | String The root element to intialise a form in, or a CSS selector for the root element
options (optional) Object {} An options object for configuring the banners

Links

Input#handleEvent(event)

Instance Method

Event Handler

parameter type default description
event Object The event emitted by element/window interactions

Links

Input#validate

Instance Method

Input validation Conditions for input validation

Links

State#set(state)

Instance Method

State setter

parameter type default description
state (optional) String type of state to display

Links

new Forms(formElement, options)

Class constructor.

parameter type default description
formElement (optional) HTMLElement The form element in the DOM
options (optional) Object {} An options object for configuring the form

Methods

Links

Switch component view

GitHub Repository

Install o-forms

If using the Build Service, add o-forms@^7.0.10 to your script and link tags.

If running a Manual Build, run bower install --save "o-forms@^7.0.10".

Help & Support

o-forms is maintained directly by the Origami team. If you have any questions about o-forms or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com