Feedback Laraform is now in maintenance mode. Read more on our GitHub.

form$ - <Laraform>

Main Laraform component which is being used as a mixin by each form instance.

#Properties

Name Type Default Description
form object - Form options object for external customization.
storePath string - Vuex store state path.
schema object - The schema of element contained within the form.
theme string config.theme Theme of the form.
locale string config.locale Locale of the form.
timezone string config.timezone Timezone of the form.
userTimezone string config.userTimezone Forced timezone of the user.
endpoint string config.endpoints.process Endpoint to submit the form.
method string config.method Method how the form should submit.
class string null Form's CSS class.
classes object {} Override of theme classes.
columns object config.columns Default column sizes for elements.
labels boolean config.labels Whether label DOM should be displayed for elements without label option defined.
layout string config.layout Theme layout of the form.
buttons array [] Form buttons.
tabs object {} Form tabs definition.
wizard object {} Form wizard definition.
wizardControls boolean true Whether wizard controls should appear when using wizard.
messages object {} Custom error messages.
multilingual boolean false Whether the form is multilingual.
languages object config.languages Available languages for mulitlingual form.
language string config.language The default language of a multilingual form.
validateOn string config.validateOn List of events separated by | when validation should occur. Possible values: change, submit, step.
formErrors boolean config.formErrors Whether errors should be displayed above form.
enableStepsOnLoad boolean config.enableStepsOnLoad Whether steps should be enabled on loading data.
completeStepsOnLoad boolean config.completeStepsOnLoad Whether steps should be enabled & completed on loading data.
key string null Form key to be sent when submitting data.
validation boolean true Determine if the form should validate.
submitting boolean false Determine if the form is currently submitting.
updating boolean false Determine if the form's data is currently being updated for external model.
elements$ object - Form element components.
wizard$ object - Form wizard component.
tabs$ object - Form tabs component.
form$ object - The
DOM element.
data object - The form's data.
filtered object - The form's data excluding elements with unmet conditions and the ones which should not submit.
dirty boolean - Whether the form has any dirty element.
invalid boolean - Whether the form has any invalid element.
debouncing boolean - Whether the form has any debouncing element.
pending boolean - Whether the form has any pending element.
validated boolean - Whether each element of the form has been validated.
busy boolean - Whether the form has any busy element.
errors array - List of all errors within the form.
disabled boolean - Whether the form is disabled.
formClass array - The CSS classes of the form.
store object - The value of external Vuex store state.

#Methods

# .on(event, callback)

Parameters
  • event string : event to listen for.
  • callback function : callback to run when the event is triggered. The this variable refers to the component the listener is set for.

Adds a listener for an event.

# .off(event)

Parameters
  • event string : event to remove the listeners for.

Removes all listeners for an event.

# .fire(event, args) @returns {any}

Parameters
  • event string : event to fire.
  • args object : arguments to pass for the event's listeners.

Fires an event.

# .submit()

Starts the submission process.

# .validate()

Validates each elements within the form.

# .load(data)

Parameters
  • data object : data to load

Loads data and clears any element if the element's key is not found in the data object.

# .update(data)

Parameters
  • data object : data to update with

Updates the element values which are contained in the data.

# .reset()

Resets the form to its default state.

# .el$(path, elements)

Parameters
  • path string : path of the element
  • elements string : elements$ object to look elements for (leave blank)

Returns an element by its path.

# .siblings$(path)

Parameters
  • path string : path of the element

Returns the siblings of an element.

# .proceed(callback)

Parameters
  • callback function : the function to call

Fires a callback only if all async processes finished and no invalid elements were found.

# .send()

Transforms form data to FormData object and sends it to the endpoint.

# .formData(data, formData, namespace)

Parameters
  • data object : data to transform
  • formData object : FormData object (leave blank)
  • namespace string : namespace to use (leave blank)

Transforms form data into FormData.

# .disableValidation()

Disabled validation.

# .enableValidation()

Enables validation.

# .getMethod() @returns {string}

Retrieves the form submission method.

# .setLanguage(code)

Parameters
  • code string : code of language to set

Set the language of a multilingual form.

# .__(expr, data) @returns {string}

Parameters
  • expr string : the tag to translate
  • data object : variables for translation tag

Translates a tag.

#Events

# change(data)

Parameters
  • data object : data of the form (filtered)

Triggered when form's data is changed.

# submit

Triggered when the form is submitted. Can prevent further execution (element validation) if returns false.

# response(response)

Parameters
  • response object : response object

Triggered when receives a response from the server upon submitting the form.

# success(response)

Parameters
  • response object : response object

Triggered when receives a success response from the server upon submitting the form.

# fail(response)

Parameters
  • response object : response object

Triggered when receives a fail response from the server upon submitting the form.

# error(error)

Parameters
  • error object : error object

Triggered when receives an error from the server upon submitting the form.

# language

Triggered when user selects a language in a multilingual form.

# reset

Triggered when the form is resetted.