Home Reference Source
import FormioForm from 'formiojs/src/formio.form.js'
public class | source

FormioForm

Extends:

BaseComponentFormioComponents → FormioForm

Renders a Form.io form within the webpage.

Example:

import FormioForm from 'formiojs/form';
let form = new FormioForm(document.getElementById('formio'));
form.src = 'https://examples.form.io/example';

Constructor Summary

Public Constructor
public

constructor(element: Object, options: Object)

Creates a new FormioForm instance.

Member Summary

Public Members
public

alert: HTMLElement

The alert HTML element

public
public

element: *

public

Called when the element has been resolved.

public set

form(form: Object)

Sets the form value.

public get

form: Object: *

Gets the form object.

public

Promise that executes when the form is ready and rendered.

public

Called when this form could not load and is rejected.

public

Called when the formReady state of this form has been resolved.

public

The Formio instance for this form.

public
public set

language(lang: *): Promise

Sets the language for this form.

public

loader: HTMLElement

The loader HTML element.

public set

loading(loading: boolean)

Set the loading state for this form, and also show the loader spinner.

public get

Returns if this form is loading.

public

Determines if this form should submit the API on submit.

public

Promise to trigger when the element for this form is established.

public

Promise that is triggered when the form is done building.

public

Promise that is triggered when the submission is done loading.

public get

Called when both the form and submission have been loaded.

public get

schema: *

public

shortcuts: *[]

public set

src(value: string)

Set the Form source, which is typically the Form.io embed URL.

public get

src: string: *

Get the embed source of the form.

public set

submission(submission: Object)

Sets the submission of a form.

public get

Returns the submission object that was set within this form.

public

Promise that executes when the submission is ready and rendered.

public

Called when this form could not load and is rejected.

public

Called when the formReady state of this form has been resolved.

public

The type of this element.

public get

url: string: *

Get the embed source of the form.

public set

url(value: string)

Set the form source but don't initialize the form and submission from the url.

public

wrapper: *

Private Members
private

_form: {}

private
private
private

Method Summary

Public Methods
public

addLanguage(code: *, lang: *, active: *): *

Add a language for translations

public

addShortcut(element: *, shortcut: *)

public

build()

Build the form.

public

cancel(noconfirm: *): boolean

Cancels the submission.

public

createForm(form: Object): Promise<TResult>

Create a new form.

public

Send a delete request to the server.

public

executeShortcuts(event: *)

public

executeSubmit(options: *): *

public

getValue(): *

public
public

Loads the submission if applicable.

public

localize(): *

Perform the localization initialization.

public

mergeData(_this: *, _that: *)

public

onChange(changed: *, flags: *)

Trigger the change event for this form.

public

Called when an error occurs during the submission.

public

onSubmit(submission: Object, saved: boolean): object

Called when the submission has completed, or if the submission needs to be sent to an external library.

public

removeShortcut(element: *, shortcut: *)

public

render(): Promise<TResult>

Render the form within the HTML element.

public

reset()

Resets the submission of a form and restores defaults.

public

setAlert(type: string, message: string)

Sets a new alert to display in the error dialog of the form.

public

setElement(element: HTMLElement)

Sets the the outside wrapper element of the Form.

public

setForm(form: Object): *

Sets the JSON schema for the form to be rendered.

public

setSrc(value: *, options: *)

Set the src of the form renderer.

public

setSubmission(submission: *, flags: *): Promise<TResult>

Sets a submission and returns the promise when it is ready.

public

setUrl(value: *, options: *): boolean

Sets the url of the form renderer.

public

setValue(submission: *, flags: *): *

public

showErrors(error: Object): *

Show the errors of this form within the alert dialog.

public

submit(before: boolean): Promise

Submits the form.

public

submitForm(options: {}): *

public

submitUrl(URL: *, headers: *): *

Inherited Summary

From class BaseComponent
public static

schema(sources: ...*): *

public get

Retrieves the CSS class name of this component.

public get

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

Return if the component is disabled.

public set

disabled(disabled: boolean)

Disable this component.

public get
public get

The empty value for this component.

public get

errorLabel: *: *

Returns the error label for this component.

public get

errors: *

public get
public get
public get

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

value: *: *

Get the value of this component.

public get
public get

visible: *

public set
public get

wysiwygDefault: {"theme": string, "placeholder": *, "modules": *}

public

The Form.io component JSON schema.

public

data: *

The data object in which this component resides.

public
public

The bounding HTML Element which this component is rendered.

public

The existing error that this component has.

public
public

The HTMLElement for which the errors are rendered for this component (usually underneath the component).

public

An array of event handlers so that the destry command can deregister them.

public

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

The ID of this component.

public

The basic component information which tells the BaseComponent how to render the input element of the components that derive from this class.

public

An array of all of the input HTML Elements that have been added to this component.

public
public
public

The HTMLElement that is assigned to the label of this component.

public

options: {}

The options for this component.

public
public

Points to the parent component.

public

If this input has been input and provided value.

public

quill: *

public

Points to the root component, usually the FormComponent.

public

The row path of this component.

public

The HTML Element for the table body.

public

tooltip: *

public

Used to trigger a new change in this component.

public

type: *

public

validators: [string]

The validators that are assigned to this component.

public
private

Determines if this component is disabled, or not.

private

Determines if this component has a condition assigned to it.

private
private

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

Add new input element listeners.

public

addInputGroup(input: HTMLElement, container: HTMLElement): HTMLElement

Adds a new input group to hold the input html elements.

public
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

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
public

beforeNext(): *

Called before a next page is triggered allowing the components to perform special functions.

public

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

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

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
public

createViewOnlyLabel(container: *)

public

createViewOnlyValue(container: *)

public

Create the input wrapping element.

public

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
public

getElement(): HTMLElement

Returns the outside wrapping element of this component.

public

getFlags(): *

public

getIcon(name: string): HTMLElement

Returns an HTMLElement icon element.

public
public
public

getModifiedSchema(schema: *, defaultSchema: *): *

Returns only the schema that is different from the default.

public
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

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

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

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
public

Check if a component is eligible for multiple validation

public
public

whenReady(): *

From class FormioComponents
public static

schema(extend: ...*): *

public get
public get
public set
public get

errors: *

public get

schema: *

public get

value: *

public
public

components: *[]

public

hidden: *[]

public
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

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
public

Perform an iteration over each component within this container component.

public

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

public

Returns a component provided a key.

public

Return a component provided the Id of the component.

public
public
public

getValue(): *

public
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

Removes a component provided the Id of the component.

public

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
public

updateValue(flags: *): *

public

whenReady(): *

Public Constructors

public constructor(element: Object, options: Object) source

Creates a new FormioForm instance.

Override:

FormioComponents#constructor

Params:

NameTypeAttributeDescription
element Object

The DOM element you wish to render this form within.

options Object

The options to create a new form instance.

options.readOnly boolean

Set this form to readOnly

options.noAlerts boolean

Set to true to disable the alerts dialog.

options.i18n boolean

The translation file for this rendering. @see https://github.com/formio/formio.js/blob/master/i18n.js

options.template boolean

Provides a way to inject custom logic into the creation of every element rendered within the form.

Example:

import FormioForm from 'formiojs/form';
let form = new FormioForm(document.getElementById('formio'), {
  readOnly: true
});
form.src = 'https://examples.form.io/example';

Public Members

public alert: HTMLElement source

The alert HTML element

public component: * source

The Form.io component JSON schema.

Override:

BaseComponent#component

public element: * source

The bounding HTML Element which this component is rendered.

Override:

BaseComponent#element

public elementResolve: function source

Called when the element has been resolved.

public set form(form: Object) source

Sets the form value.

public get form: Object: * source

Gets the form object.

Return:

Object

The form JSON schema.

public formReady: Promise source

Promise that executes when the form is ready and rendered.

Example:

let form = new FormioForm(document.getElementById('formio'));
form.ready.then(() => {
  console.log('The form is ready!');
});
form.src = 'https://examples.form.io/example';

public formReadyReject: function source

Called when this form could not load and is rejected.

public formReadyResolve: function source

Called when the formReady state of this form has been resolved.

public formio: Formio source

The Formio instance for this form.

public isBuilt: boolean source

Override:

BaseComponent#isBuilt

public set language(lang: *): Promise source

Sets the language for this form.

Return:

Promise

public loader: HTMLElement source

The loader HTML element.

public set loading(loading: boolean) source

Set the loading state for this form, and also show the loader spinner.

public get loading: boolean: * source

Returns if this form is loading.

Return:

boolean

TRUE means the form is loading, FALSE otherwise.

public nosubmit: boolean source

Determines if this form should submit the API on submit.

public onElement: Promise source

Promise to trigger when the element for this form is established.

public onFormBuild: Promise source

Promise that is triggered when the form is done building.

public onSubmission: Promise source

Promise that is triggered when the submission is done loading.

public get ready: Promise: * source

Called when both the form and submission have been loaded.

Return:

Promise

The promise to trigger when both form and submission have loaded.

public get schema: * source

Override:

FormioComponents#schema

public shortcuts: *[] source

public set src(value: string) source

Set the Form source, which is typically the Form.io embed URL.

Example:

let form = new FormioForm(document.getElementById('formio'));
form.formReady.then(() => {
  console.log('The form is formReady!');
});
form.src = 'https://examples.form.io/example';

public get src: string: * source

Get the embed source of the form.

Return:

string

public set submission(submission: Object) source

Sets the submission of a form.

Example:

let form = new FormioForm(document.getElementById('formio'));
form.src = 'https://examples.form.io/example';
form.submission = {data: {
  firstName: 'Joe',
  lastName: 'Smith',
  email: 'joe@example.com'
}};

public get submission: Object: * source

Returns the submission object that was set within this form.

Return:

Object

public submissionReady: Promise source

Promise that executes when the submission is ready and rendered.

Example:

let form = new FormioForm(document.getElementById('formio'));
form.ready.then(() => {
  console.log('The form is ready!');
});
form.src = 'https://examples.form.io/example';

public submissionReadyReject: function source

Called when this form could not load and is rejected.

public submissionReadyResolve: function source

Called when the formReady state of this form has been resolved.

public type: string source

The type of this element.

Override:

FormioComponents#type

public get url: string: * source

Get the embed source of the form.

Return:

string

public set url(value: string) source

Set the form source but don't initialize the form and submission from the url.

public wrapper: * source

Private Members

private _form: {} source

private _loading: boolean source

private _src: string source

private _submission: {} source

Public Methods

public addLanguage(code: *, lang: *, active: *): * source

Add a language for translations

Params:

NameTypeAttributeDescription
code *
lang *
active *

Return:

*

public addShortcut(element: *, shortcut: *) source

Override:

BaseComponent#addShortcut

Params:

NameTypeAttributeDescription
element *
shortcut *

public build() source

Build the form.

Override:

FormioComponents#build

public cancel(noconfirm: *): boolean source

Cancels the submission.

Params:

NameTypeAttributeDescription
noconfirm *

Return:

boolean

public createForm(form: Object): Promise<TResult> source

Create a new form.

Params:

NameTypeAttributeDescription
form Object

The form object that is created.

Return:

Promise<TResult>

public deleteSubmission(): * source

Send a delete request to the server.

Return:

*

public executeShortcuts(event: *) source

Params:

NameTypeAttributeDescription
event *

public executeSubmit(options: *): * source

Params:

NameTypeAttributeDescription
options *

Return:

*

public getValue(): * source

Get the input value of this component.

Override:

FormioComponents#getValue

Return:

*

public keyboardCatchableElement(element: *): boolean source

Params:

NameTypeAttributeDescription
element *

Return:

boolean

public loadSubmission(): * source

Loads the submission if applicable.

Return:

*

public localize(): * source

Perform the localization initialization.

Return:

*

public mergeData(_this: *, _that: *) source

Params:

NameTypeAttributeDescription
_this *
_that *

public onChange(changed: *, flags: *) source

Trigger the change event for this form.

Override:

BaseComponent#onChange

Params:

NameTypeAttributeDescription
changed *
flags *

public onSubmissionError(error: Object): * source

Called when an error occurs during the submission.

Params:

NameTypeAttributeDescription
error Object

The error that occured.

Return:

*

public onSubmit(submission: Object, saved: boolean): object source

Called when the submission has completed, or if the submission needs to be sent to an external library.

Params:

NameTypeAttributeDescription
submission Object

The submission object.

saved boolean

Whether or not this submission was saved to the server.

Return:

object

The submission object.

public removeShortcut(element: *, shortcut: *) source

Override:

BaseComponent#removeShortcut

Params:

NameTypeAttributeDescription
element *
shortcut *

public render(): Promise<TResult> source

Render the form within the HTML element.

Return:

Promise<TResult>

public reset() source

Resets the submission of a form and restores defaults.

Example:

let form = new FormioForm(document.getElementById('formio'));
form.src = 'https://examples.form.io/example';
form.submission = {data: {
  firstName: 'Joe',
  lastName: 'Smith',
  email: 'joe@example.com'
}};

// In two seconds, reset the data in the form.
setTimeout(() => form.reset(), 2000);

public setAlert(type: string, message: string) source

Sets a new alert to display in the error dialog of the form.

Params:

NameTypeAttributeDescription
type string

The type of alert to display. "danger", "success", "warning", etc.

message string

The message to show in the alert.

public setElement(element: HTMLElement) source

Sets the the outside wrapper element of the Form.

Params:

NameTypeAttributeDescription
element HTMLElement

The element to set as the outside wrapper element for this form.

public setForm(form: Object): * source

Sets the JSON schema for the form to be rendered.

Params:

NameTypeAttributeDescription
form Object

The JSON schema of the form @see https://examples.form.io/example for an example JSON schema.

Return:

*

Example:

let form = new FormioForm(document.getElementById('formio'));
form.setForm({
  components: [
    {
      type: 'textfield',
      key: 'firstName',
      label: 'First Name',
      placeholder: 'Enter your first name.',
      input: true
    },
    {
      type: 'textfield',
      key: 'lastName',
      label: 'Last Name',
      placeholder: 'Enter your last name',
      input: true
    },
    {
      type: 'button',
      action: 'submit',
      label: 'Submit',
      theme: 'primary'
    }
  ]
});

public setSrc(value: *, options: *) source

Set the src of the form renderer.

Params:

NameTypeAttributeDescription
value *
options *

public setSubmission(submission: *, flags: *): Promise<TResult> source

Sets a submission and returns the promise when it is ready.

Params:

NameTypeAttributeDescription
submission *
flags *

Return:

Promise<TResult>

public setUrl(value: *, options: *): boolean source

Sets the url of the form renderer.

Params:

NameTypeAttributeDescription
value *
options *

Return:

boolean

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

Set the value of this component.

Override:

FormioComponents#setValue

Params:

NameTypeAttributeDescription
submission *
flags *

Return:

*

public showErrors(error: Object): * source

Show the errors of this form within the alert dialog.

Params:

NameTypeAttributeDescription
error Object

An optional additional error to display along with the component errors.

Return:

*

public submit(before: boolean): Promise source

Submits the form.

Params:

NameTypeAttributeDescription
before boolean

If this submission occured from the before handlers.

Return:

Promise

A promise when the form is done submitting.

Example:

let form = new FormioForm(document.getElementById('formio'));
form.src = 'https://examples.form.io/example';
form.submission = {data: {
  firstName: 'Joe',
  lastName: 'Smith',
  email: 'joe@example.com'
}};
form.submit().then((submission) => {
  console.log(submission);
});

public submitForm(options: {}): * source

Params:

NameTypeAttributeDescription
options {}
  • optional
  • default: {}

Return:

*

public submitUrl(URL: *, headers: *): * source

Params:

NameTypeAttributeDescription
URL *
headers *

Return:

*