antd Form组件表单在vue3中的使用
antd Form表单组件有个最需要注意的问题,官方文档里写的很清楚:这是什么意思,我们下面说个例子就明白了:<template><a-formref="formRef":model="formState":rules="rules":label-col="labelCol":wrapper-col="wrapperCol"><a-form-item ref="use
·
antd Form表单组件有个最需要注意的问题,官方文档里写的很清楚:
这是什么意思,我们下面说个例子就明白了:
<template>
<a-form
ref="formRef"
:model="formState"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-item ref="username" name="username">
<label>Username:</label>
<a-input v-model:value="formState.username" />
</a-form-item>
<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button type="primary" @click="onSubmit">Create</a-button>
<a-button style="margin-left: 10px" @click="resetForm">Reset</a-button>
</a-form-item>
</a-form>
</template>
这里<a-form-item>
的标签name
属性需要和表单对象formState
里面的字段username
对应上,包含在标签里面的<a-input>
标签的v-model:value
绑定formState.username
这里a-form-item
里面的name
属性是用来给rules
验证规则对应使用的
import { defineComponent, reactive, ref, toRaw } from "vue"
export default defineComponent({
setup() {
const formState = reactive({
name: "",
username: '',
password: '',
password2: '',
code: ''
})
const rules = {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" }
]
}
return {
labelCol: {
span: 4,
},
wrapperCol: {
span: 14,
},
formState,
rules
}
}
})
表单数据存在formState
里面
验证规则存在rules
里面
最后别忘了返回:
效果:
当失去焦点的时候,会提示用户
输入字符长度不在3-5之间的话,也会提示:
但是如果这样写,就不会有错误提示了:
效果:
失去焦点以后,并不会提示:
这就是官方文档里面提到的,<a-form-item>
只会监听第一个子元素的变化
如果我们调换一下位置:
又可以提示了:
如果非要把label放在输入框上面,又不想影响提示功能,怎么办??
<a-form-item>
上面套一个div不就完事了:
效果:
当然最方便的就是默认的样式,直接在<a-form-item>
标签里面配置label
属性就可以了:
效果:
更多推荐
已为社区贡献13条内容
所有评论(0)