EFormItem 表单项

import EUI 1.0

示例与代码

标签关联与聚焦

QML 代码QML

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行许可

表单项

QML 代码QML

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
        label: qsTr("邮箱")
        showMessage: true
        size: EStyle.Large
        formDisabled: false
        validateEvent: true
        inlineMessage: false
        labelPosition: "left"
        propagateToField: true
        showSuccessState: true
        validateOnChange: true
        inheritFormConfig: false
        helpText: qsTr("用于接收账户通知")
        hideRequiredAsterisk: false
        objectName: "galleryFormItem"
        requiredMessage: qsTr("请输入邮箱")
        validationMessage: qsTr("格式正确")
        requiredAsteriskPosition: "left"
        width: Math.min(parent.width, 560)
        validationState: EValidationState.Success
        rules: [{ required: true, message: qsTr("邮箱不能为空") }]
        validator: function(value) {
            return String(value).indexOf("@") > 0 || qsTr("请输入有效邮箱")
        }

EInput {
            clearable: true
            width: parent.width
            text: "demo@example.com"
        }
    }
    EFormItem {
        rowSpacing: 8
        labelWidth: 90
        labelSuffix: "："
        size: EStyle.Large
        label: qsTr("外部错误")
        labelPosition: "left"
        error: qsTr("服务端返回的错误信息")
        width: Math.min(parent.width, 560)

EInput {
            text: qsTr("错误值")
            width: parent.width
        }
    }
    EDescriptions {
        columns: 1
        objectName: "galleryFormFeedback"
        width: Math.min(parent.width, 560)
        model: [{
            "label": qsTr("邮箱"),
            "value": standaloneItem.fieldValue
        }, {
            "label": qsTr("消息"),
            "value": standaloneItem.effectiveMessage
        }]
    }
    Flow {
        spacing: 10
        width: parent.width

EButton {
            text: qsTr("校验")
            styleType: EStyle.Primary
            objectName: "galleryFormValidate"

onClicked: standaloneItem.validate()
        }
        EButton {
            text: qsTr("重新开始")
            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("加载中")
                : standaloneItem.hasValidationError ? qsTr("校验失败")
                : standaloneItem.validationState === EValidationState.Success ? qsTr("格式正确") : qsTr("输入")
        }
        ETag {
            text: qsTr("编辑")
            size: EStyle.Large
            visible: standaloneItem.fieldFocused
        }
    }
}

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行许可

属性

属性说明取值与默认值

contentDataalias

内容插槽；直接在组件内部声明 QML 子对象。

默认值别名：fieldContainer.data

enabledbool

是否允许交互；false 时控件禁用。

默认值true

errorstring

校验结果说明或外部错误文字。

默认值""

errorComponentComponent

自定义错误状态的 Component 插槽；null 使用默认内容。委托上下文见本页示例。

默认值null

formvar

此表单项所属的 EForm；默认沿父对象查找。

默认值null

formDisabledbool

当前表单传递给表单项的禁用状态。

默认值false

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitHeight

helpTextstring

字段辅助说明文字。

默认值""

hideRequiredAsteriskbool

隐藏必填星号。

默认值false

inheritFormConfigbool

继承所属表单的配置。

默认值true

inlineMessagebool

以行内方式显示校验消息。

默认值false

labelstring

标签文字或选项标识；用于显示或与选中值匹配。

默认值""

labelComponentComponent

自定义标签文字的 Component 插槽；null 使用默认内容。委托上下文见本页示例。

默认值null

labelPositionstring

表单标签的位置。

left
right
top

默认值"top"

labelSuffixstring

追加在标签末尾的文字。

默认值""

labelWidthint

标签宽度，单位为像素。

默认值0

propstring

此表单项在表单 model 中对应的字段路径。

默认值""

propagateToFieldbool

把禁用、尺寸及校验状态传递给字段控件。

默认值true

requiredbool

把该表单项标记为必填。

默认值false

requiredAsteriskPositionstring

必填标记相对于标签的位置。

"left" / "right"

默认值"left"

requiredMessagestring

必填字段为空时的提示文字。

默认值随当前语言变化

resettablebool

允许表单重置此字段。

默认值true

rowSpacingint

相邻内容、列、行或文字间距，单位为像素。

默认值6

rulesvar

当前字段使用的校验规则数组。

字段：
required, whitespace, type
len, min, max
pattern, enum, oneOf
validator, transform, message
trigger

默认值[]

showMessagebool

是否显示校验消息。

默认值true

showSuccessStatebool

校验成功时显示成功状态。

默认值false

sizeint

控件尺寸；默认继承最近的 EConfigProvider。

EStyle.Small
EStyle.Medium
EStyle.Large

默认值继承 Provider，默认 EStyle.Medium

validateEventbool

值变化时是否向所属表单派发校验请求。

默认值true

validateOnChangebool

字段值变化时自动校验。

默认值false

validationMessagestring

校验结果说明或外部错误文字。

默认值""

validationStateint

输入校验状态。

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

默认值EValidationState.None

validatorvar

自定义字段校验函数；可返回错误说明、布尔值或 Promise。

默认值null

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitWidth

effectiveMessagestring只读

表单项综合外部错误与校验结果后的消息。

默认值由运行时计算

effectiveValidateEventbool只读

表单项和字段共同确定的校验事件开关。

默认值由运行时计算

fieldItem只读

表单项内部找到的字段控件。

默认值由运行时计算

fieldFocusedbool只读

当前字段控件是否获得焦点。

默认值由运行时计算

fieldValuevar只读

从表单模型或字段控件读到的当前值。

默认值由运行时计算

hasValidationErrorbool只读

当前校验状态是否为 Error。

默认值由运行时计算

isRequiredbool只读

合并 required 与规则后字段是否必填。

默认值由运行时计算

validatingbool只读

是否正在执行异步表单校验。

默认值由运行时计算

信号

签名作用

validateFinished(string prop, bool valid, string message)

字段校验完成时触发，prop 为字段路径，valid 表示是否通过，message 为校验提示。

方法

签名作用

clearValidation()

清除校验提示和校验状态，不修改字段值。

setInitialValue(value)

设置当前字段后续重置时使用的初始值。

validateAsync(trigger, callback)

执行异步校验，通过 callback 接收校验结果。

focusField()

将焦点移到当前字段的输入控件；返回是否成功聚焦。

clearValidate()

清除校验提示和校验状态，不修改当前数据。

resetField()

恢复当前字段的初始值并清除校验状态。

validate(trigger, callback)

校验当前数据；支持 callback 的组件会将校验结果交给回调。

EFormItem 表单项 ​

示例与代码 ​

标签关联与聚焦 ​

表单项 ​

属性 ​

信号 ​

方法 ​

EFormItem 表单项

示例与代码

标签关联与聚焦

表单项

属性

信号

方法