import {FormioComponents} from 'formiojs/src/components/Components.js'

public class | source

FormioComponents

Extends:

BaseComponent → FormioComponents

Direct Subclass:

ColumnComponent, ColumnsComponent, ContainerComponent, DataGridComponent, EditGridComponent, FieldsetComponent, FormioForm, PanelComponent, TableComponent, TabsComponent, WellComponent

Static Method Summary

Static Public Methods
public static	schema(extend: ...):

Constructor Summary

Public Constructor
public	constructor()

Member Summary

Public Members
public	collapsed: *
public get	componentComponents: *
public	components: *[]
public get	defaultSchema: *
public set	disabled
public get	errors: *
public	hidden: *[]
public get	schema: *
public	type: string
public get	value: *

Method Summary

Public Methods
public	addComponent(component: Object, element: HTMLElement, data: Object, before: HTMLElement): BaseComponent Add a new component to the components array.
public	addComponents(element: , data: )
public	beforeNext(): * Allow components to hook into the next page trigger to perform their own logic.
public	beforeSubmit(): * Allow components to hook into the submission to provide their own async data.
public	build(showLabel: *)
public	calculateValue(data: , flags: ): *
public	checkConditions(data: ):
public	checkData(data: , flags: ): * A more performant way to check the conditions, calculations, and validity of a submission once it has been changed.
public	checkValidity(data: , dirty: ): *
public	clearOnHide(show: *)
public	createComponent(component: , data: ): * Create a new component and add it to the components array.
public	destroy(all: *)
public	destroyComponents()
public	eachComponent(fn: function) Perform an iteration over each component within this container component.
public	everyComponent(fn: function) Perform a deep iteration over every component, including those within other container based components.
public	getComponent(key: string, fn: function): Object Returns a component provided a key.
public	getComponentById(id: string, fn: function): Object Return a component provided the Id of the component.
public	getComponents(): *
public	getContainer(): *
public	getValue(): *
public	hasChanged(): boolean
public	hideComponents(hidden: *)
public	isValid(data: , dirty: ): *
public	onResize(scale: *)
public	removeComponent(component: BaseComponent, components: Array<BaseComponent>) Remove a component from the components array.
public	removeComponentById(id: string, fn: function): null Removes a component provided the Id of the component.
public	removeComponentByKey(key: string, fn: function): null Removes a component provided the API key of that component.
public	setCollapseHeader(header: *)
public	setCollapsed(element: *)
public	setHidden(component: *)
public	setPristine(pristine: *)
public	setValue(value: , flags: ): *
public	toggleCollapse()
public	updateValue(flags: ):
public	whenReady(): *

Inherited Summary

From class BaseComponent
public static	schema(sources: ...):
public get	className: string: * Retrieves the CSS class name of this component.
public get	customStyle: string: * Build the custom style from the layout values
public get	dataValue: : Get the static value of this component.
public set	dataValue(value: *) Sets the static value of this component.
public get	defaultSchema: *
public get	defaultValue: *
public get	defaultViewOnlyValue: string
public get	disabled: boolean: * Return if the component is disabled.
public set	disabled(disabled: boolean) Disable this component.
public get	emptyValue: *
public get	emptyValue: null: * The empty value for this component.
public get	errorLabel: : Returns the error label for this component.
public get	errors: *
public get	hasInput: *
public get	hasValue: *
public get	hasValue: * Returns if this component has a value set.
public get	label: * Get this component's label text.
public set	label(value: *) Set this component's label text and render it.
public get	name: string: * The readible name for this component.
public get	schema: * Returns the JSON schema for this component.
public get	shouldDisable: *
public get	validationValue: *
public get	value: : Get the value of this component.
public get	viewOnly: *
public get	visible: *
public set	visible
public get	wysiwygDefault: {"theme": string, "placeholder": , "modules": }
public	component: * The Form.io component JSON schema.
public	data: * The data object in which this component resides.
public	description: *
public	element: null The bounding HTML Element which this component is rendered.
public	error: string The existing error that this component has.
public	errorContainer: *
public	errorElement: null The HTMLElement for which the errors are rendered for this component (usually underneath the component).
public	eventHandlers: Array An array of event handlers so that the destry command can deregister them.
public	eventListeners: Array An array of the event listeners so that the destroy command can deregister them.
public	events: * The events that are triggered for the whole FormioForm object.
public	i18next: *
public	id: string The ID of this component.
public	info: null The basic component information which tells the BaseComponent how to render the input element of the components that derive from this class.
public	inputs: Array An array of all of the input HTML Elements that have been added to this component.
public	invalid: boolean
public	isBuilt: boolean
public	labelElement: null The HTMLElement that is assigned to the label of this component.
public	options: {} The options for this component.
public	originalComponent: *
public	parent: BaseComponent Points to the parent component.
public	pristine: boolean If this input has been input and provided value.
public	quill: *
public	root: BaseComponent Points to the root component, usually the FormComponent.
public	row: number The row path of this component.
public	tbody: null The HTML Element for the table body.
public	tooltip: *
public	triggerChange: function Used to trigger a new change in this component.
public	type: *
public	validators: [string] The validators that are assigned to this component.
public	valueElement: *
private	_disabled: boolean Determines if this component is disabled, or not.
private	_hasCondition: null Determines if this component has a condition assigned to it.
private	_inputMask: *
private	_visible: boolean Determines if this component is visible, or not.
public	addButton(justIcon: *): HTMLElement Adds a new button to add new rows to the multiple input elements.
public	addClass(element: , className: ) Adds a class to a DOM element.
public	addEventListener(obj: , evt: , func: *) Wrapper method to add an event listener to an HTML element.
public	addInput(input: , container: , noSet: ): Add a new input to this comonent.
public	addInputError(message: , dirty: ) Add a new input error to this element.
public	addInputEventListener(input: *) Add new input element listeners.
public	addInputGroup(input: HTMLElement, container: HTMLElement): HTMLElement Adds a new input group to hold the input html elements.
public	addInputSubmitListener(input: *)
public	addNewValue(value: *) Adds a new empty value to the data array.
public	addPrefix(input: HTMLElement, inputGroup: HTMLElement): HTMLElement Adds a prefix html element.
public	addQuill(element: , settings: , onChange: ):
public	addShortcut(element: , shortcut: )
public	addShortcutToLabel(label: , shortcut: ): *
public	addSuffix(input: HTMLElement, inputGroup: HTMLElement): HTMLElement Adds a suffix html element.
public	addValue() Adds a new empty value to the data array, and add a new row to contain it.
public	append(element: *)
public	appendChild(child: *) Append different types of children.
public	appendTo(element: , container: )
public	asString(value: ): Prints out the value of this component as a string value.
public	attr(element: HtmlElement, attr: Object) Adds an object of attributes onto an element.
public	autofocus()
public	beforeNext(): * Called before a next page is triggered allowing the components to perform special functions.
public	beforeSubmit(): * Called before a submission is triggered allowing the components to perform special async functions.
public	bootstrap4Theme(name: ):
public	build() Builds the component.
public	buildRows(values: *) Rebuild the rows to contain the values of this component.
public	calculateValue(data: *): boolean Perform a calculated value operation.
public	ce(type: string, attr: Object, children: Various, events: Object): HTMLElement Alias for document.createElement.
public	checkConditions(data: ): Check for conditionals and hide/show the element based on those conditions.
public	checkValidity(data: , dirty: ): *
public	clear()
public	clearOnHide(show: *)
public	createDescription(container: *) Creates the description block for this input field.
public	createElement(): HTMLElement Create the outside wrapping element for this component.
public	createErrorElement() Creates a new error element to hold the errors of this element.
public	createInput(container: HTMLElement): HTMLElement Creates a new input element.
public	createLabel(container: HTMLElement) Create the HTML element for the label of this component.
public	createModal(title: ):
public	createTooltip(container: HTMLElement) Create the HTML element for the tooltip of this component.
public	createViewOnlyElement(): *
public	createViewOnlyLabel(container: *)
public	createViewOnlyValue(container: *)
public	createWrapper(): boolean Create the input wrapping element.
public	deleteValue() Deletes the value of the component.
public	destroy(all: *) Remove all event handlers.
public	elementInfo(): {"type": string, "component": , "changeEvent": string, "attr": } Get the element information.
public	emit(event: string, data: Object) Emit a new event.
public	empty(element: *)
public	errorMessage(type: ): Get the error message provided a certain type of error.
public	fieldLogic(data: ): Check all triggers and apply necessary actions.
public	focus()
public	getBrowserLanguage(): *
public	getElement(): HTMLElement Returns the outside wrapping element of this component.
public	getFlags(): *
public	getIcon(name: string): HTMLElement Returns an HTMLElement icon element.
public	getLabelMargin(): *
public	getLabelWidth(): *
public	getModifiedSchema(schema: , defaultSchema: ): * Returns only the schema that is different from the default.
public	getRawValue(): *
public	getRoot(): * Get FormioForm element at the root of this component tree.
public	getValue(): * Get the input value of this component.
public	getValueAt(index: ): Get the value at a specific index.
public	getView(value: ):
public	hasChanged(before: , after: ): boolean Determine if the value of this component has changed.
public	hasClass(element: , className: ): * Determines if an element has a class.
public	hasCondition(): null Determines if this component has a condition defined.
public	hook(): * Allow for options to hook into the functionality of this renderer.
public	iconClass(name: , spinning: ): *
public	interpolate(string: , data: ): *
public	invalidMessage(data: , dirty: ): * Returns the invalid message, or empty string if the component is valid.
public	isEmpty(value: ):
public	isValid(data: , dirty: ): boolean Returns if the component is valid or not.
public	labelIsHidden(): *
public	labelOnTheLeft(position: ):
public	labelOnTheLeftOrRight(position: ):
public	labelOnTheRight(position: ):
public	maskPlaceholder(mask: HTMLElement): string Creates a new input mask placeholder.
public	off(event: *) Removes all listeners for a certain event.
public	on(event: string, cb: function, internal: boolean): * Register for a new event within this component.
public	onChange(flags: , fromRoot: )
public	onResize()
public	prepend(element: *)
public	prependTo(element: , container: )
public	redraw()
public	removeButton(index: number): HTMLElement Creates a new "remove" row button and returns the html element of that button.
public	removeChild(element: *)
public	removeChildFrom(element: , container: )
public	removeClass(element: , className: ) Remove a class from a DOM element.
public	removeEventListener(obj: , evt: ) Remove an event listener from the object.
public	removeShortcut(element: , shortcut: )
public	removeValue(index: number) Removes a value out of the data array and rebuild the rows.
public	renderTemplate(template: , data: , actions: *): HTMLElement Render a template string into html.
public	restoreValue() Restore the value of a control.
public	rightAlignedLabel(position: ):
public	selectOptions(select: , tag: , options: , defaultValue: )
public	setCustomValidity(message: , dirty: )
public	setDisabled(element: , disabled: )
public	setInputMask(input: HTMLElement) Sets the input mask for an input.
public	setInputStyles(input: *)
public	setLoading(element: , loading: )
public	setPristine(pristine: *) Sets the pristine flag for this component.
public	setSelectValue(select: , value: )
public	setValue(value: , flags: ): boolean Set the value of this component.
public	setValueAt(index: , value: ) Set the value at a specific index.
public	setupValueElement(element: *)
public	show(show: ): Hide or Show an element.
public	showElement(element: , show: ): * Show or hide the root element of this component.
public	splice(index: *) Splice a value from the dataValue.
public	t(text: string, params: Object): * Translate a text using the i18n system.
public	text(text: *): Text Alias to create a text node.
public	updateOnChange(flags: , changed: ): boolean Update the value on change.
public	updateValue(flags: ): Update a value of this component.
public	updateViewOnlyValue()
public	validateMultiple(value: *): boolean Check if a component is eligible for multiple validation
public	viewOnlyBuild()
public	whenReady(): *

Static Public Methods

public static schema(extend: ...): source

Override:

BaseComponent#schema

Params:

Name	Type	Attribute	Description
extend	...*

Return:

Public Constructors

public constructor() source

Initialize a new BaseComponent.

Override:

BaseComponent#constructor

Public Members

public collapsed: * source

public get componentComponents: * source

public components: *[] source

public get defaultSchema: * source

Override:

BaseComponent#defaultSchema

public set disabled source

Return if the component is disabled.

Override:

BaseComponent#disabled

public get errors: * source

Override:

BaseComponent#errors

public hidden: *[] source

public get schema: * source

Override:

BaseComponent#schema

public type: string source

Override:

BaseComponent#type

public get value: * source

Get the value of this component.

Override:

BaseComponent#value

Public Methods

public addComponent(component: Object, element: HTMLElement, data: Object, before: HTMLElement): BaseComponent source

Add a new component to the components array.

Params:

Name	Type	Attribute	Description
component	Object		The component JSON schema to add.
element	HTMLElement		The DOM element to append this child to.
data	Object		The submission data object to house the data for this component.
before	HTMLElement		A DOM element to insert this element before.

Return:

BaseComponent

The created component instance.

public addComponents(element: , data: ) source

Params:

Name	Type	Attribute	Description
element	*
data	*

public beforeNext(): * source

Allow components to hook into the next page trigger to perform their own logic.

Override:

BaseComponent#beforeNext

Return:

public beforeSubmit(): * source

Allow components to hook into the submission to provide their own async data.

Override:

BaseComponent#beforeSubmit

Return:

public build(showLabel: *) source

Builds the component.

Override:

BaseComponent#build

Params:

Name	Type	Attribute	Description
showLabel	*

public calculateValue(data: , flags: ): * source

Perform a calculated value operation.

Override:

BaseComponent#calculateValue

Params:

Name	Type	Attribute	Description
data	*
flags	*

Return:

public checkConditions(data: ): source

Check for conditionals and hide/show the element based on those conditions.

Override:

BaseComponent#checkConditions

Params:

Name	Type	Attribute	Description
data	*

Return:

public checkData(data: , flags: ): * source

A more performant way to check the conditions, calculations, and validity of a submission once it has been changed.

Params:

Name	Type	Attribute	Description
data	*
flags	*

Return:

public checkValidity(data: , dirty: ): * source

Override:

BaseComponent#checkValidity

Params:

Name	Type	Attribute	Description
data	*
dirty	*

Return:

public clearOnHide(show: *) source

Override:

BaseComponent#clearOnHide

Params:

Name	Type	Attribute	Description
show	*

public createComponent(component: , data: ): * source

Create a new component and add it to the components array.

Params:

Name	Type	Attribute	Description
component	*
data	*

Return:

public destroy(all: *) source

Remove all event handlers.

Override:

BaseComponent#destroy

Params:

Name	Type	Attribute	Description
all	*

public destroyComponents() source

public eachComponent(fn: function) source

Perform an iteration over each component within this container component.

Params:

Name	Type	Attribute	Description
fn	function		Called for each component

public everyComponent(fn: function) source

Perform a deep iteration over every component, including those within other container based components.

Params:

Name	Type	Attribute	Description
fn	function		Called for every component.

public getComponent(key: string, fn: function): Object source

Returns a component provided a key. This performs a deep search within the component tree.

Params:

Name	Type	Attribute	Description
key	string		The key of the component to retrieve.
fn	function		Called with the component once found.

Return:

Object

The component that is located.

public getComponentById(id: string, fn: function): Object source

Return a component provided the Id of the component.

Params:

Name	Type	Attribute	Description
id	string		The Id of the component.
fn	function		Called with the component once it is retrieved.

Return:

Object

The component retrieved.

public getComponents(): * source

Return:

public getContainer(): * source

Return:

public getValue(): * source

Get the input value of this component.

Override:

BaseComponent#getValue

Return:

public hasChanged(): boolean source

Determine if the value of this component has changed.

Override:

BaseComponent#hasChanged

Return:

boolean

public hideComponents(hidden: *) source

Params:

Name	Type	Attribute	Description
hidden	*

public isValid(data: , dirty: ): * source

Returns if the component is valid or not.

Override:

BaseComponent#isValid

Params:

Name	Type	Attribute	Description
data	*
dirty	*

Return:

public onResize(scale: *) source

Override:

BaseComponent#onResize

Params:

Name	Type	Attribute	Description
scale	*

public removeComponent(component: BaseComponent, components: Array<BaseComponent>) source

Remove a component from the components array.

Params:

Name	Type	Attribute	Description
component	BaseComponent		The component to remove from the components.
components	Array<BaseComponent>		An array of components to remove this component from.

public removeComponentById(id: string, fn: function): null source

Removes a component provided the Id of the component.

Params:

Name	Type	Attribute	Description
id	string		The Id of the component to remove.
fn	function		Called when the component is removed.

Return:

null

public removeComponentByKey(key: string, fn: function): null source

Removes a component provided the API key of that component.

Params:

Name	Type	Attribute	Description
key	string		The API key of the component to remove.
fn	function		Called once the component is removed.

Return:

null

public setCollapseHeader(header: *) source

Params:

Name	Type	Attribute	Description
header	*

public setCollapsed(element: *) source

Params:

Name	Type	Attribute	Description
element	*

public setHidden(component: *) source

Params:

Name	Type	Attribute	Description
component	*

public setPristine(pristine: *) source

Sets the pristine flag for this component.

Override:

BaseComponent#setPristine

Params:

Name	Type	Attribute	Description
pristine	*

public setValue(value: , flags: ): * source

Set the value of this component.

Override:

BaseComponent#setValue

Params:

Name	Type	Attribute	Description
value	*
flags	*

Return:

public toggleCollapse() source

public updateValue(flags: ): source

Update a value of this component.

Override:

BaseComponent#updateValue

Params:

Name	Type	Attribute	Description
flags	*

FormioComponents

Extends:

Direct Subclass:

Static Method Summary

Constructor Summary

Member Summary

Method Summary

Inherited Summary

Static Public Methods

public static schema(extend: ...*): * source

Override:

Params:

Return:

Public Constructors

public constructor() source

Override:

Public Members

public collapsed: * source

public get componentComponents: * source

public components: *[] source

public get defaultSchema: * source

Override:

public set disabled source

Override:

public get errors: * source

Override:

public hidden: *[] source

public get schema: * source

Override:

public type: string source

Override:

public get value: * source

Override:

Public Methods

public addComponent(component: Object, element: HTMLElement, data: Object, before: HTMLElement): BaseComponent source

Params:

Return:

public addComponents(element: *, data: *) source

Params:

public beforeNext(): * source

Override:

Return:

public beforeSubmit(): * source

Override:

Return:

public build(showLabel: *) source

Override:

Params:

public calculateValue(data: *, flags: *): * source

Override:

Params:

Return:

public checkConditions(data: *): * source

Override:

Params:

Return:

public checkData(data: *, flags: *): * source

Params:

Return:

public checkValidity(data: *, dirty: *): * source

Override:

Params:

Return:

public clearOnHide(show: *) source

Override:

Params:

public createComponent(component: *, data: *): * source

Params:

Return:

public destroy(all: *) source

Override:

Params:

public destroyComponents() source

public eachComponent(fn: function) source

Params:

public everyComponent(fn: function) source

Params:

public getComponent(key: string, fn: function): Object source

Params:

Return:

public static schema(extend: ...): source

public addComponents(element: , data: ) source

public calculateValue(data: , flags: ): * source

public checkConditions(data: ): source

public checkData(data: , flags: ): * source

public checkValidity(data: , dirty: ): * source

public createComponent(component: , data: ): * source

public isValid(data: , dirty: ): * source

public setValue(value: , flags: ): * source

public updateValue(flags: ): source