FormioForm
Extends:
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 |
component: * |
|
| public |
element: * |
|
| public |
Called when the element has been resolved. |
|
| public set |
Sets the form value. |
|
| public get |
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 |
Sets the language for this form. |
|
| public |
loader: HTMLElement The loader HTML element. |
|
| public set |
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 |
Set the Form source, which is typically the Form.io embed URL. |
|
| public get |
Get the embed source of the form. |
|
| public set |
submission(submission: Object) Sets the submission of a form. |
|
| public get |
submission: Object: * 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 |
Get the embed source of the form. |
|
| public set |
Set the form source but don't initialize the form and submission from the url. |
|
| public |
wrapper: * |
|
| Private Members | ||
| private |
_form: {} |
|
| private |
|
|
| private |
|
|
| private |
_submission: {} |
|
Method Summary
| Public Methods | ||
| public |
addLanguage(code: *, lang: *, active: *): * Add a language for translations |
|
| public |
addShortcut(element: *, shortcut: *) |
|
| public |
build() Build the form. |
|
| public |
Cancels the submission. |
|
| public |
createForm(form: Object): Promise<TResult> Create a new form. |
|
| public |
deleteSubmission(): * Send a delete request to the server. |
|
| public |
executeShortcuts(event: *) |
|
| public |
executeSubmit(options: *): * |
|
| public |
getValue(): * |
|
| public |
keyboardCatchableElement(element: *): boolean |
|
| public |
loadSubmission(): * 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 |
onSubmissionError(error: Object): * Called when an error occurs during the submission. |
|
| public |
Called when the submission has completed, or if the submission needs to be sent to an external library. |
|
| public |
removeShortcut(element: *, shortcut: *) |
|
| public |
Render the form within the HTML element. |
|
| public |
reset() Resets the submission of a form and restores defaults. |
|
| public |
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 |
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 |
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 |
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 |
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 |
|
|
| public get |
defaultValue: * |
|
| public get |
|
|
| public get |
Return if the component is disabled. |
|
| public set |
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 |
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 |
viewOnly: * |
|
| public get |
visible: * |
|
| public set |
|
|
| 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 |
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 |
valueElement: * |
|
| private |
Determines if this component is disabled, or not. |
|
| private |
Determines if this component has a condition assigned to it. |
|
| private |
_inputMask: * |
|
| 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 |
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 |
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 |
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 |
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 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 |
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 |
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 |
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 |
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 |
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 |
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 |
validateMultiple(value: *): boolean 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 |
collapsed: * |
|
| 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 |
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 |
|
|
| 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 |
|
|
| 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 |
|
|
| public |
updateValue(flags: *): * |
|
| public |
whenReady(): * |
|
Public Constructors
public constructor(element: Object, options: Object) source
Creates a new FormioForm instance.
Override:
FormioComponents#constructorParams:
| Name | Type | Attribute | Description |
| 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 element: * source
The bounding HTML Element which this component is rendered.
Override:
BaseComponent#elementpublic 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 formReadyResolve: function source
Called when the formReady state of this form has been resolved.
public set loading(loading: boolean) source
Set the loading state for this form, and also show the loader spinner.
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 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.
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 submissionReadyResolve: function source
Called when the formReady state of this form has been resolved.
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 _submission: {} source
Public Methods
public addLanguage(code: *, lang: *, active: *): * source
Add a language for translations
Params:
| Name | Type | Attribute | Description |
| code | * | ||
| lang | * | ||
| active | * |
Return:
| * |
public addShortcut(element: *, shortcut: *) source
Override:
BaseComponent#addShortcutParams:
| Name | Type | Attribute | Description |
| element | * | ||
| shortcut | * |
public cancel(noconfirm: *): boolean source
Cancels the submission.
Params:
| Name | Type | Attribute | Description |
| noconfirm | * |
public createForm(form: Object): Promise<TResult> source
Create a new form.
Params:
| Name | Type | Attribute | Description |
| form | Object | The form object that is created. |
public executeShortcuts(event: *) source
Params:
| Name | Type | Attribute | Description |
| event | * |
public getValue(): * source
Get the input value of this component.
Override:
FormioComponents#getValueReturn:
| * |
public keyboardCatchableElement(element: *): boolean source
Params:
| Name | Type | Attribute | Description |
| element | * |
public mergeData(_this: *, _that: *) source
Params:
| Name | Type | Attribute | Description |
| _this | * | ||
| _that | * |
public onChange(changed: *, flags: *) source
Trigger the change event for this form.
Override:
BaseComponent#onChangeParams:
| Name | Type | Attribute | Description |
| changed | * | ||
| flags | * |
public onSubmissionError(error: Object): * source
Called when an error occurs during the submission.
Params:
| Name | Type | Attribute | Description |
| 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.
public removeShortcut(element: *, shortcut: *) source
Override:
BaseComponent#removeShortcutParams:
| Name | Type | Attribute | Description |
| element | * | ||
| shortcut | * |
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.
public setElement(element: HTMLElement) source
Sets the the outside wrapper element of the Form.
Params:
| Name | Type | Attribute | Description |
| 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:
| Name | Type | Attribute | Description |
| 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:
| Name | Type | Attribute | Description |
| value | * | ||
| options | * |
public setSubmission(submission: *, flags: *): Promise<TResult> source
Sets a submission and returns the promise when it is ready.
Params:
| Name | Type | Attribute | Description |
| submission | * | ||
| flags | * |
public setUrl(value: *, options: *): boolean source
Sets the url of the form renderer.
Params:
| Name | Type | Attribute | Description |
| value | * | ||
| options | * |
public setValue(submission: *, flags: *): * source
Set the value of this component.
Override:
FormioComponents#setValueParams:
| Name | Type | Attribute | Description |
| submission | * | ||
| flags | * |
Return:
| * |
public showErrors(error: Object): * source
Show the errors of this form within the alert dialog.
Params:
| Name | Type | Attribute | Description |
| error | Object | An optional additional error to display along with the component errors. |
Return:
| * |
public submit(before: boolean): Promise source
Submits the form.
Params:
| Name | Type | Attribute | Description |
| before | boolean | If this submission occured from the before handlers. |
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:
| Name | Type | Attribute | Description |
| options | {} |
|
Return:
| * |
public submitUrl(URL: *, headers: *): * source
Params:
| Name | Type | Attribute | Description |
| URL | * | ||
| headers | * |
Return:
| * |
