Components/Form components

EForm Form

import EUI 1.0

Examples

Form

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { width: Math.min(640, parent.width) spacing: 16 EForm { id: form width: parent.width model: ({amount: 1.25}) onSubmitted: console.log(valid, model.amount) EFormItem { prop: "amount" required: true width: parent.width label: qsTr("Amount") rules: [{type: "number", min: 0.25, max: 10}] labelComponent: Component { EText { font.bold: true text: parent.label } } errorComponent: Component { EText { text: parent.message color: EPaletteManager.StatePalette.validationColor(EValidationState.Error) } } ESpinBox { numberTo: 10 precision: 2 editable: true numberStep: 0.25 numberValue: 1.25 } } } EButton { text: qsTr("Validate submission") onClicked: form.submit() } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Form

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Item { id: page property var account: ({ "name": "" }) width: 620 height: 180 EForm { id: accountForm spacing: 16 labelWidth: 90 labelSuffix: ":" size: EStyle.Large model: page.account width: parent.width focusFirstError: true validateOnChange: true rules: ({ "name": [{ "required": true, "trigger": "change", "message": qsTr("Name is required") }] }) EFormItem { prop: "name" required: true label: qsTr("Name") width: parent.width EInput { clearable: true width: parent.width } } } EButton { text: qsTr("Validate") anchors.top: accountForm.bottom onClicked: accountForm.validate() } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

columnSpacingint

Gap between content, columns, rows or text in pixels.

Defaultspacing

contentDataalias

Content slot; declare QML child objects directly inside the component.

DefaultAlias: formGrid.data

disabledbool

Disable controls in this configuration scope or form.

Defaultfalse

enabledbool

Allow interaction; false disables the control.

Defaulttrue

focusFirstErrorbool

Focus the first invalid field after validation fails.

Defaulttrue

heightreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitHeight

hideRequiredAsteriskbool

Hide the required-field asterisk.

Defaultfalse

inlinebool

Use inline form layout.

Defaultfalse

inlineMessagebool

Display validation messages inline.

Defaultfalse

labelPositionstring

Position of the form label.

left
right
top

Default"top"

labelSuffixstring

Text appended to labels.

Default""

labelWidthint

Label width in pixels.

Default0

modelvar

Component data source; item structure follows the current example and component contract.

Defaultnull

requiredAsteriskPositionstring

Position of the required marker relative to the label.

"left" / "right"

Default"left"

rulesvar

Validation rule object keyed by field.

Fields:
required, whitespace, type
len, min, max
pattern, enum, oneOf
validator, transform, message
trigger

Default({})

showMessagebool

Show validation messages.

Defaulttrue

sizeint

Control size; inherits the nearest EConfigProvider by default.

EStyle.Small
EStyle.Medium
EStyle.Large

DefaultInherited; EStyle.Medium by default

spacingint

Gap between content, columns, rows or text in pixels.

Default18

validateOnChangebool

Validate automatically when a field value changes.

Defaultfalse

validateOnRuleChangebool

Validate automatically when rules change.

Defaulttrue

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitWidth

fieldsvarRead only

Registered field items in the form.

DefaultComputed at runtime

firstInvalidItemvarRead only

First invalid field item in the form.

DefaultComputed at runtime

validboolRead only

Whether QR encoding or form validation is valid.

DefaultComputed at runtime

validatingboolRead only

Whether asynchronous form validation is running.

DefaultComputed at runtime

Signals

SignaturePurpose

submitted(bool valid, var model)

Emitted after submit validation completes; valid is the result and model is the submitted form data.

validationFinished(bool valid, var firstInvalidItem)

Emitted after form validation; valid is the result and firstInvalidItem is the first invalid field.

fieldValidated(string prop, bool valid, string message)

Emitted after validating a field; prop is its path, valid is the result, and message is the validation message.

Methods

SignaturePurpose

clearValidation(props)

Clear validation messages and state without changing field values.

modelValue(prop)

Return the form model value at path prop.

validateAsync(callback)

Run asynchronous validation and receive the result through callback.

setModelValue(prop, value)

Update the form model value at path prop.

validate(callback)

Validate the current data; components supporting callback pass the result to that callback.

submit()

Validate the form and emit submitted with the validation result and form data.

getField(prop)

Return the form field component identified by prop.

validateField(props, callback, trigger)

Validate the fields specified by props; callback receives the result and trigger optionally limits the validation trigger.

setInitialValues(valuesOrProps)

Set initial form values for subsequent resetFields calls.

resetFields(props)

Reset fields specified by props to their initial values and clear validation; omit props to reset all fields.

clearValidate(props)

Clear validation messages and state without changing current data.

scrollToField(prop)

Scroll the field identified by prop into view.