组件/表单组件

EForm 表单

import EUI 1.0

示例与代码

表单

QML 代码QML

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("金额") 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("提交校验") onClicked: form.submit() } }

效果

运行代码，体验组件交互

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

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

表单

QML 代码QML

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("请输入名称") }] }) EFormItem { prop: "name" required: true label: qsTr("名称") width: parent.width EInput { clearable: true width: parent.width } } } EButton { text: qsTr("验证") anchors.top: accountForm.bottom onClicked: accountForm.validate() } }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

columnSpacingint

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

默认值spacing

contentDataalias

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

默认值别名：formGrid.data

disabledbool

禁用当前配置作用域内的控件或当前表单。

默认值false

enabledbool

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

默认值true

focusFirstErrorbool

校验失败时聚焦第一个错误字段。

默认值true

heightreal

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

默认值implicitHeight

hideRequiredAsteriskbool

隐藏必填星号。

默认值false

inlinebool

采用行内表单布局。

默认值false

inlineMessagebool

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

默认值false

labelPositionstring

表单标签的位置。

left
right
top

默认值"top"

labelSuffixstring

追加在标签末尾的文字。

默认值""

labelWidthint

标签宽度，单位为像素。

默认值0

modelvar

组件的数据源；数组项结构以当前示例及组件说明为准。

默认值null

requiredAsteriskPositionstring

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

"left" / "right"

默认值"left"

rulesvar

按字段组织的校验规则对象。

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

默认值({})

showMessagebool

是否显示校验消息。

默认值true

sizeint

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

EStyle.Small
EStyle.Medium
EStyle.Large

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

spacingint

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

默认值18

validateOnChangebool

字段值变化时自动校验。

默认值false

validateOnRuleChangebool

校验规则变化时自动校验。

默认值true

visiblebool

是否显示组件。

默认值true

widthreal

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

默认值implicitWidth

fieldsvar只读

当前表单注册的字段项列表。

默认值由运行时计算

firstInvalidItemvar只读

表单中的第一个无效字段项。

默认值由运行时计算

validbool只读

二维码编码或表单校验是否有效。

默认值由运行时计算

validatingbool只读

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

默认值由运行时计算

信号

签名作用

submitted(bool valid, var model)

表单提交校验结束时触发，valid 表示是否通过，model 为提交的表单数据。

validationFinished(bool valid, var firstInvalidItem)

整体验证完成时触发，valid 表示是否通过，firstInvalidItem 为首个未通过的字段。

fieldValidated(string prop, bool valid, string message)

单个字段校验结束时触发，prop 为字段路径，valid 表示是否通过，message 为校验提示。

方法

签名作用

clearValidation(props)

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

modelValue(prop)

读取 prop 路径对应的表单数据值。

validateAsync(callback)

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

setModelValue(prop, value)

更新 prop 路径对应的表单数据值。

validate(callback)

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

submit()

校验表单并触发 submitted，将校验结果和表单数据交给使用者处理。

getField(prop)

返回 prop 指定的表单字段组件。

validateField(props, callback, trigger)

校验 props 指定的字段，callback 接收结果，trigger 可限定校验触发类型。

setInitialValues(valuesOrProps)

设置表单字段的初始值，供后续 resetFields 使用。

resetFields(props)

将 props 指定的字段恢复到初始值并清除校验状态；省略时处理全部字段。

clearValidate(props)

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

scrollToField(prop)

将 prop 指定的字段滚动到可见位置。