mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-04 21:18:14 +08:00
7aae6f675c
* doc: add form demo * fix: form dynamic error * doc: add form demo * revert: formitem auto validate #4955 * fix: input not update when set undefined * doc: add form demo * fix: form validate for number tyope, close #5064 * fix: form validateMessages not work * doc: add form demo
87 lines
2.5 KiB
Vue
87 lines
2.5 KiB
Vue
<docs>
|
||
---
|
||
order: 5
|
||
title:
|
||
zh-CN: 嵌套结构与校验信息
|
||
en-US: Nest
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
`name` 属性支持嵌套数据结构。通过 `validateMessages` 或 `message` 自定义校验信息模板，模板内容可参考[此处](https://github.com/vueComponent/ant-design-vue/blob/next/components/form/utils/messages.ts)。
|
||
|
||
## en-US
|
||
|
||
`name` prop support nest data structure. Customize validate message template with `validateMessages` or `message`. Ref [here](https://github.com/vueComponent/ant-design-vue/blob/next/components/form/utils/messages.ts) about message template.
|
||
</docs>
|
||
<template>
|
||
<a-form
|
||
:model="formState"
|
||
v-bind="layout"
|
||
name="nest-messages"
|
||
:validate-messages="validateMessages"
|
||
@finish="onFinish"
|
||
>
|
||
<a-form-item :name="['user', 'name']" label="Name" :rules="[{ required: true }]">
|
||
<a-input v-model:value="formState.user.name" />
|
||
</a-form-item>
|
||
<a-form-item :name="['user', 'email']" label="Email" :rules="[{ type: 'email' }]">
|
||
<a-input v-model:value="formState.user.email" />
|
||
</a-form-item>
|
||
<a-form-item :name="['user', 'age']" label="Age" :rules="[{ type: 'number', min: 0, max: 99 }]">
|
||
<a-input-number v-model:value="formState.user.age" />
|
||
</a-form-item>
|
||
<a-form-item :name="['user', 'website']" label="Website">
|
||
<a-input v-model:value="formState.user.website" />
|
||
</a-form-item>
|
||
<a-form-item :name="['user', 'introduction']" label="Introduction">
|
||
<a-textarea v-model:value="formState.user.introduction" />
|
||
</a-form-item>
|
||
<a-form-item :wrapper-col="{ ...layout.wrapperCol, offset: 8 }">
|
||
<a-button type="primary" html-type="submit">Submit</a-button>
|
||
</a-form-item>
|
||
</a-form>
|
||
</template>
|
||
<script lang="ts">
|
||
import { defineComponent, reactive } from 'vue';
|
||
|
||
export default defineComponent({
|
||
setup() {
|
||
const layout = {
|
||
labelCol: { span: 8 },
|
||
wrapperCol: { span: 16 },
|
||
};
|
||
|
||
const validateMessages = {
|
||
required: '${label} is required!',
|
||
types: {
|
||
email: '${label} is not a valid email!',
|
||
number: '${label} is not a valid number!',
|
||
},
|
||
number: {
|
||
range: '${label} must be between ${min} and ${max}',
|
||
},
|
||
};
|
||
|
||
const formState = reactive({
|
||
user: {
|
||
name: '',
|
||
age: undefined,
|
||
email: '',
|
||
website: '',
|
||
introduction: '',
|
||
},
|
||
});
|
||
const onFinish = (values: any) => {
|
||
console.log('Success:', values);
|
||
};
|
||
return {
|
||
formState,
|
||
onFinish,
|
||
layout,
|
||
validateMessages,
|
||
};
|
||
},
|
||
});
|
||
</script>
|