Components/EUI extensions

EFormItem Form item

import EUI 1.0

Examples

Associated label and focus

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EFormItem { width: 420 label: "Account" EInput { width: 280 placeholderText: "Click Account to focus" } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Form item

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 16 width: parent.width EFormItem { id: standaloneItem error: "" form: null prop: "email" rowSpacing: 8 labelWidth: 90 required: true labelSuffix: "：" resettable: true showMessage: true size: EStyle.Large formDisabled: false validateEvent: true inlineMessage: false label: qsTr("Email") labelPosition: "left" propagateToField: true showSuccessState: true validateOnChange: true inheritFormConfig: false hideRequiredAsterisk: false objectName: "galleryFormItem" requiredAsteriskPosition: "left" width: Math.min(parent.width, 560) validationMessage: qsTr("Valid format") requiredMessage: qsTr("Enter your email") validationState: EValidationState.Success helpText: qsTr("Used for account notifications") rules: [{ required: true, message: qsTr("Email is required") }] validator: function(value) { return String(value).indexOf("@") > 0 || qsTr("Enter a valid email address") } EInput { clearable: true width: parent.width text: "demo@example.com" } } EFormItem { rowSpacing: 8 labelWidth: 90 labelSuffix: "：" size: EStyle.Large labelPosition: "left" label: qsTr("External error") width: Math.min(parent.width, 560) error: qsTr("Error returned by the server") EInput { width: parent.width text: qsTr("Reset value") } } EDescriptions { columns: 1 objectName: "galleryFormFeedback" width: Math.min(parent.width, 560) model: [{ "label": qsTr("Email"), "value": standaloneItem.fieldValue }, { "label": qsTr("Messages"), "value": standaloneItem.effectiveMessage }] } Flow { spacing: 10 width: parent.width EButton { text: qsTr("Validate") styleType: EStyle.Primary objectName: "galleryFormValidate" onClicked: standaloneItem.validate() } EButton { text: qsTr("Start over") objectName: "galleryFormReset" onClicked: standaloneItem.resetField() } ETag { size: EStyle.Large styleType: standaloneItem.hasValidationError ? EStyle.Danger : standaloneItem.validationState === EValidationState.Success ? EStyle.Success : EStyle.Info text: standaloneItem.validating ? qsTr("Loading") : standaloneItem.hasValidationError ? qsTr("Validation failed") : standaloneItem.validationState === EValidationState.Success ? qsTr("Valid format") : qsTr("Input") } ETag { size: EStyle.Large text: qsTr("Edit") visible: standaloneItem.fieldFocused } } }

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

contentDataalias

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

DefaultAlias: fieldContainer.data

enabledbool

Allow interaction; false disables the control.

Defaulttrue

errorstring

Validation message or externally supplied error text.

Default""

errorComponentComponent

Component slot for custom error state; null uses the default content. See this page’s examples for delegate context.

Defaultnull

formvar

Enclosing EForm for this form item; found through ancestors by default.

Defaultnull

formDisabledbool

Disabled state passed from the form to this item.

Defaultfalse

heightreal

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

DefaultimplicitHeight

helpTextstring

Field help text.

Default""

hideRequiredAsteriskbool

Hide the required-field asterisk.

Defaultfalse

inheritFormConfigbool

Inherit settings from the enclosing form.

Defaulttrue

inlineMessagebool

Display validation messages inline.

Defaultfalse

labelstring

Label text or option identifier used for display or selection matching.

Default""

labelComponentComponent

Component slot for custom label; null uses the default content. See this page’s examples for delegate context.

Defaultnull

labelPositionstring

Position of the form label.

left
right
top

Default"top"

labelSuffixstring

Text appended to labels.

Default""

labelWidthint

Label width in pixels.

Default0

propstring

Path of this form item in the form model.

Default""

propagateToFieldbool

Propagate disabled, size and validation settings to the field control.

Defaulttrue

requiredbool

Mark this form item as required.

Defaultfalse

requiredAsteriskPositionstring

Position of the required marker relative to the label.

"left" / "right"

Default"left"

requiredMessagestring

Message for an empty required field.

DefaultLocalized text

resettablebool

Allow form reset to reset this field.

Defaulttrue

rowSpacingint

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

Default6

rulesvar

Array of validation rules for the current field.

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

Default[]

showMessagebool

Show validation messages.

Defaulttrue

showSuccessStatebool

Show the success state after successful validation.

Defaultfalse

sizeint

Control size; inherits the nearest EConfigProvider by default.

EStyle.Small
EStyle.Medium
EStyle.Large

DefaultInherited; EStyle.Medium by default

validateEventbool

Request enclosing-form validation when the value changes.

Defaulttrue

validateOnChangebool

Validate automatically when a field value changes.

Defaultfalse

validationMessagestring

Validation message or externally supplied error text.

Default""

validationStateint

Input validation state.

EValidationState.None
EValidationState.Success
EValidationState.Warning
EValidationState.Error

DefaultEValidationState.None

validatorvar

Custom field validator returning an error message, boolean or Promise.

Defaultnull

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

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

DefaultimplicitWidth

effectiveMessagestringRead only

Form-item message resolved from external errors and validation.

DefaultComputed at runtime

effectiveValidateEventboolRead only

Validation-event setting resolved from form item and field.

DefaultComputed at runtime

fieldItemRead only

Field control found inside the form item.

DefaultComputed at runtime

fieldFocusedboolRead only

Whether the field control is focused.

DefaultComputed at runtime

fieldValuevarRead only

Current value read from the form model or field control.

DefaultComputed at runtime

hasValidationErrorboolRead only

Whether validation state is Error.

DefaultComputed at runtime

isRequiredboolRead only

Whether the field is required after merging required and rules.

DefaultComputed at runtime

validatingboolRead only

Whether asynchronous form validation is running.

DefaultComputed at runtime

Signals

SignaturePurpose

validateFinished(string prop, bool valid, string message)

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

Methods

SignaturePurpose

clearValidation()

Clear validation messages and state without changing field values.

setInitialValue(value)

Set the initial value used when this field is reset.

validateAsync(trigger, callback)

Run asynchronous validation and receive the result through callback.

focusField()

Focus this field input; return whether focus succeeds.

clearValidate()

Clear validation messages and state without changing current data.

resetField()

Restore this field to its initial value and clear validation.

validate(trigger, callback)

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