Builder
Examples
Case Studies
News
Resources
Ecosystem
Appearance
Star
Menu
On this page

HiddenElement ​

Renders a native HTML hidden input.

Basic Usage ​

<HiddenElement> component can be used in a <Vueform> component:

vue
<template>
  <Vueform>
    <HiddenElement name="hidden_element" ... />
  </Vueform>
</template>

Configuration options can be passed over as regular component props. Check out Options section for available configuration options.

Options ​

Find below the list of options that can use to configure HiddenElement component. Options can be passed to the component via props in inline templates, or in the element's object when using schema.

meta ​

  • Type: boolean
  • Default: false
vue
<HiddenElement :meta="true" ... />

Whether the element's value is only used for storing data and should not render an actual hidden input field.

name ​

  • Type: string|number
  • Default: undefined
  • Required: true
vue
<HiddenElement name="element" ... />

Sets the element's name and the name attribute of the hidden input.

id ​

  • Type: string
  • Default: null
vue
<HiddenElement id="field-id" ... />

Sets the id attribute of the hidden input.

default ​

  • Type: string|number|object
  • Default: null
vue
<HiddenElement default="Default" ... />

Sets the default value for the hidden input.

formatData ​

  • Type: function
  • Default: null
vue
<HiddenElement :format-data="(n, v) => ({[n]: /* transformed value */ })" ... />

Formats the element's requestData.

The first param is the element's name, the second is the value. The return value should be an object, which only contains one item with the element's name as key and the transformed value as value.

formatLoad ​

  • Type: function
  • Default: null
vue
<HiddenElement :format-load="(v) => /* transformed value */" ... />

Formats the data being loaded to the element when using load(data, format: true). It receives the value being loaded to the element as its first param and should return the formatted value of the element.

submit ​

  • Type: boolean
  • Default: true
vue
<HiddenElement :submit="false" ... />

If set to false the element's data will not be included in requestData and will not be submitted.

rules ​

  • Type: array|string|object
  • Default: null
vue
<HiddenElement rules="required" ... />
<HiddenElement :rules="['required']" ... />

The validation rules to be applied for the element.

The list of rules can be defined as a string separated by | or as an array, where each item should be a single validation rule.

fieldName ​

  • Type: string
  • Default: name|label
vue
<HiddenElement field-name="Field name" rules="required" ... />

Sets the name of the field in validation rule messages.

messages ​

  • Type: object
  • Default: {}
vue
<HiddenElement rules="required" :messages="{ required: 'Please fill in' }" ... />

Overrides the default messages for the element's validation rules. The value is an object where each key is the name of a validation rule and the value is the error message that will be displayed when the rule fails.

You can override validation messages on form level with messages.

conditions ​

  • Type: array
  • Default: []
vue
<!-- field1 - type 'show' -->
<TextElement name="field1" ... />

<!-- field2 - only if field1 == 'show' -->
<HiddenElement name="field2" :conditions="[['field1', 'show']]" ... />

<!-- field3 - only if field1 != 'show' -->
<HiddenElement name="field3" :conditions="[['field1', '!=', 'show']]" ... />

<!-- field4 - only if field1 == 'show' -->
<HiddenElement name="field4" :conditions="[
  (form$, el$) => form$.el$('field1')?.value === 'show'
]" ... />

Shows or hides an element based on the provided conditions.

If an element's conditions are unmet the element will be hidden and its available property will become false. If hidden, its value will not be part of requestData.

Conditions can be provided as an array, where each item has to be either an array or a function. The element will only become available if all the conditions are fulfilled.

If a condition is provided as an array, the first value must be the path of an other field which value should be watched. The second is an operator that defines the type of comparison. The third is the expected value of the other field.

vue
<HiddenElement name="field" :conditions="[['other_field', '==', 'expected_value']]" ... />

Hint: In case you want to check for equality you might leave the operator and pass the expected value as the second param:

vue
<HiddenElement name="field" :conditions="[['other_field', 'expected_value']]" ... />

Available operators:

  • == - expect equality
  • != - expect inequality
  • > - expect the other element's value(s) to be higher
  • >=- expect the other element's value(s) to be higher or equal
  • < - expect the other element's value(s) to be lower
  • <= - expect the other element's value(s) to be lower or equal
  • ^ - expect the other element's value to start with
  • $ - expect the other element's value to end with
  • * - expect the other element's value to contain
  • in - expect to be among an array of values
  • not_in - expect not to be among an array of values
  • today - expect to be today
  • before - expect to be before a date (value can be a YYYY-MM-DD date string or today)
  • after - expect to be after a date (value can be a YYYY-MM-DD date string or today)

The expected value can also be defined as an array in which case any of its values will fulfill the condition.

Conditions can be defined with OR relation or as function. Learn more about conditions here.

Properties ​

Properties include data, computed and inject properties of the component. You can use them by reaching the element's Vue component instance via form$'s el$(path) method or directly via this in options API or el$ in Composition API.

value ​

  • Type: any
  • Group: computed

The value of the element.

model ​

  • Type: any
  • Group: computed

Intermediary value between element's value and field's v-model. It is required when we need to transform the value format between the element and its field.

data ​

  • Type: object
  • Group: computed

The value of the element in {[name]: value} value format. This gets merged with the parent component's data.

requestData ​

  • Type: object
  • Group: computed

Same as data property except that it only includes the element's value if submit is not disabled and available is true (has no conditions or they are fulfilled).

empty ​

  • Type: boolean
  • Group: computed

Whether the element has no value filled in.

path ​

  • Type: string
  • Group: computed

The path of the element using dot . syntax.

dataPath ​

  • Type: string
  • Group: computed

The path of the element's data using dot . syntax.

validated ​

  • Type: boolean
  • Group: computed

Whether the element was already validated at least once.

invalid ​

  • Type: boolean
  • Group: computed

Whether the element has any failing rules.

dirty ​

  • Type: boolean
  • Group: computed

Whether the element's value was modified.

pending ​

  • Type: boolean
  • Group: computed

Whether the element has any async rules in progress.

busy ​

  • Type: boolean
  • Group: computed

Whether the element is pending.

messageBag ​

  • Type: MessageBag
  • Default: MessageBag
  • Group: data

Instance of MessageBag service. Custom errors and messages can be added.

errors ​

  • Type: array
  • Group: computed

All the errors of MessageBag.

error ​

  • Type: string
  • Group: computed

The first error of MessageBag.

available ​

  • Type: boolean
  • Group: computed

Whether no conditions are defined or they are all fulfilled.

isSuccess ​

  • Type: boolean
  • Group: computed

Whether the element has been filled in successfully.

isDanger ​

  • Type: boolean
  • Group: computed

Whether the element has errors.

container ​

  • Type: HTMLElement
  • Group: data

The ref to the outermost DOM of the element.

input ​

  • Type: HTMLElement
  • Group: data

The main input field of the element.

fieldId ​

  • Type: string
  • Group: computed

The id of the hidden input. If id is not provided path will be used.

template ​

  • Type: object
  • Group: computed

The component's template.

theme ​

  • Type: object
  • Group: inject

The global theme object, which contains all the default templates and classes.

form$ ​

  • Type: Vueform
  • Group: inject

The root form's component.

el$ ​

  • Type: VueformElement
  • Group: computed

The element's component.

mounted ​

  • Type: boolean
  • Default: true
  • Group: data

Whether the element has been already mounted.

Methods ​

The methods of the component that you can use by reaching the element's Vue component instance via form$'s el$(path) method or directly via this in options API or el$ in Composition API.

clearMessages ​

  • Returns: void

Clears the manually added messages from the messageBag.

load ​

  • Arguments:
    • {any} value* - the value to be loaded
    • {boolean} format* - whether the loaded value should be formatted with formatLoad before setting the value of the element (default: false)
  • Returns: void

Loads value to the element using optional formatLoad formatter. This is the method that gets called for each element when loading data to the form with format: true.

update ​

  • Arguments:
    • {any} value* - the value to be set
  • Returns: void

Updates the value of the element similarly to load, only that it can't format data.

clear ​

  • Returns: void

Clears the element's value.

reset ​

  • Returns: void

Resets the element's value to default (or empty if default is not provided). Also resets all the validation state for the element.

on ​

  • Arguments:
    • {string} event* - name of the event to listen for
    • {function} callback* - callback to run when the event is triggered
  • Returns: void

Adds a listener for an event.

off ​

  • Arguments:
    • {string} event* - name of the event to remove
  • Returns: void

Removes all listeners for an event.

fire ​

  • Arguments:
    • {any} args* - list of arguments to pass over to the event callback
  • Returns: void

Fires and emits an event.

validate ​

  • Returns: Promise

Checks each validation rule for the element (async).

clean ​

  • Returns: void

Removes the element's dirty state.

resetValidators ​

  • Returns: void

Sets the validators to default state.

reinitValidation ​

  • Returns: void

Re-initializes validators when rules have changed.

Events ​

With events you can subscribe to different events broadcasted by the element. It can be used inline as regular Vue event listeners with @event format. In schema it can be used in PascalCase format prefixed with on (eg. onChange).

vue
<template>
  <Vueform>
    <HiddenElement @{eventName}="handler" ... />
  </Vueform>
</template>
vue
<script>
import { Vueform, useVueform } from '@vueform/vueform'

export default {
  mixins: [Vueform],
  setup: useVueform,
  data: () => ({
    vueform: {
      schema: {
        element: {
          type: 'hidden',
          on{EventName}() {
            // ...
          }
        }
      }
    }
  })
}
</script>

You can also use on(event, callback) method to subscribe to events.

change ​

  • Params:
    • {string} newValue - the new value
    • {string} oldValue - the old value
    • {component} el$ - the element's component

Triggered when the element's value is changed.

beforeCreate ​

  • Params:
    • {component} el$ - the element's component

Triggered in beforeCreate hook.

created ​

  • Params:
    • {component} el$ - the element's component

Triggered in created hook.

beforeMount ​

  • Params:
    • {component} el$ - the element's component

Triggered in beforeMount hook.

mounted ​

  • Params:
    • {component} el$ - the element's component

Triggered in mounted hook.

beforeUpdate ​

  • Params:
    • {component} el$ - the element's component

Triggered in beforeUpdate hook.

updated ​

  • Params:
    • {component} el$ - the element's component

Triggered in updated hook.

beforeUnmount ​

  • Params:
    • {component} el$ - the element's component

Triggered in beforeUnmount (or beforeDestroy in Vue 2) hook.

unmounted ​

  • Params:
    • {component} el$ - the element's component

Triggered in unmounted (or destroyed in Vue 2) hook.

StaticElementGenericElement
👋 Hire Vueform team for form customizations and developmentLearn more