doc: add form demo
tangjinzhou
parent
51bc530f50
commit
96c50cf637
|
|
@ -51,7 +51,6 @@ Basic Form data control. Includes layout, initial values, validation and submit.
|
|||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive } from 'vue';
|
||||
import type { UnwrapRef } from 'vue';
|
||||
|
||||
interface FormState {
|
||||
username: string;
|
||||
|
|
@ -60,7 +59,7 @@ interface FormState {
|
|||
}
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const formState: UnwrapRef<FormState> = reactive({
|
||||
const formState = reactive<FormState>({
|
||||
username: '',
|
||||
password: '',
|
||||
remember: true,
|
||||
|
|
|
|||
|
|
@ -47,7 +47,6 @@ See more advanced usage at [async-validator](https://github.com/yiminghe/async-v
|
|||
<script lang="ts">
|
||||
import type { RuleObject } from 'ant-design-vue/es/form';
|
||||
import { defineComponent, reactive, ref } from 'vue';
|
||||
import type { UnwrapRef } from 'vue';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
interface FormState {
|
||||
pass: string;
|
||||
|
|
@ -57,7 +56,7 @@ interface FormState {
|
|||
export default defineComponent({
|
||||
setup() {
|
||||
const formRef = ref<FormInstance>();
|
||||
const formState: UnwrapRef<FormState> = reactive({
|
||||
const formState = reactive<FormState>({
|
||||
pass: '',
|
||||
checkPass: '',
|
||||
age: undefined,
|
||||
|
|
|
|||
|
|
@ -15,7 +15,12 @@ title:
|
|||
Add or remove form items dynamically.
|
||||
</docs>
|
||||
<template>
|
||||
<a-form ref="formRef" :model="dynamicValidateForm" v-bind="formItemLayoutWithOutLabel">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
name="dynamic_form_item"
|
||||
:model="dynamicValidateForm"
|
||||
v-bind="formItemLayoutWithOutLabel"
|
||||
>
|
||||
<a-form-item
|
||||
v-for="(domain, index) in dynamicValidateForm.domains"
|
||||
:key="domain.key"
|
||||
|
|
@ -56,7 +61,6 @@ Add or remove form items dynamically.
|
|||
<script lang="ts">
|
||||
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent, reactive, ref } from 'vue';
|
||||
import type { UnwrapRef } from 'vue';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
|
||||
interface Domain {
|
||||
|
|
@ -86,7 +90,7 @@ export default defineComponent({
|
|||
sm: { span: 20, offset: 4 },
|
||||
},
|
||||
};
|
||||
const dynamicValidateForm: UnwrapRef<{ domains: Domain[] }> = reactive({
|
||||
const dynamicValidateForm = reactive<{ domains: Domain[] }>({
|
||||
domains: [],
|
||||
});
|
||||
const submitForm = () => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,138 @@
|
|||
<docs>
|
||||
---
|
||||
order: 4.2
|
||||
title:
|
||||
zh-CN: 复杂的动态增减表单项
|
||||
en-US: Complex Dynamic Form Item
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
这个例子演示了一个表单中包含多个表单控件的情况。
|
||||
|
||||
## en-US
|
||||
|
||||
This example demonstrates the case that a form contains multiple form controls.
|
||||
|
||||
</docs>
|
||||
<template>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
name="dynamic_form_nest_item"
|
||||
:model="dynamicValidateForm"
|
||||
@finish="onFinish"
|
||||
>
|
||||
<a-form-item name="area" label="Area" :rules="[{ required: true, message: 'Missing area' }]">
|
||||
<a-select v-model:value="dynamicValidateForm.area" :options="areas" />
|
||||
</a-form-item>
|
||||
<a-space
|
||||
v-for="(sight, index) in dynamicValidateForm.sights"
|
||||
:key="sight.id"
|
||||
style="display: flex; margin-bottom: 8px"
|
||||
align="baseline"
|
||||
>
|
||||
<a-form-item
|
||||
:name="['sights', index, 'value']"
|
||||
label="Sight"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: 'Missing sight',
|
||||
}"
|
||||
>
|
||||
<a-select
|
||||
v-model:value="sight.value"
|
||||
:disabled="!dynamicValidateForm.area"
|
||||
:options="(sights[dynamicValidateForm.area] || []).map(a => ({ value: a }))"
|
||||
style="width: 130px"
|
||||
></a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="Price"
|
||||
:name="['sights', index, 'price']"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: 'Missing price',
|
||||
}"
|
||||
>
|
||||
<a-input v-model:value="sight.price" />
|
||||
</a-form-item>
|
||||
<MinusCircleOutlined @click="removeSight(sight)" />
|
||||
</a-space>
|
||||
<a-form-item>
|
||||
<a-button type="dashed" block @click="addSight">
|
||||
<PlusOutlined />
|
||||
Add sights
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit">Submit</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent, reactive, ref, watch } from 'vue';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
|
||||
interface Sights {
|
||||
value: string;
|
||||
price: string;
|
||||
id: number;
|
||||
}
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MinusCircleOutlined,
|
||||
PlusOutlined,
|
||||
},
|
||||
setup() {
|
||||
const areas = [
|
||||
{ label: 'Beijing', value: 'Beijing' },
|
||||
{ label: 'Shanghai', value: 'Shanghai' },
|
||||
];
|
||||
|
||||
const sights = {
|
||||
Beijing: ['Tiananmen', 'Great Wall'],
|
||||
Shanghai: ['Oriental Pearl', 'The Bund'],
|
||||
};
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
const dynamicValidateForm = reactive<{ sights: Sights[]; area: string }>({
|
||||
sights: [],
|
||||
area: undefined,
|
||||
});
|
||||
watch(
|
||||
() => dynamicValidateForm.area,
|
||||
() => {
|
||||
dynamicValidateForm.sights = [];
|
||||
},
|
||||
);
|
||||
const removeSight = (item: Sights) => {
|
||||
let index = dynamicValidateForm.sights.indexOf(item);
|
||||
if (index !== -1) {
|
||||
dynamicValidateForm.sights.splice(index, 1);
|
||||
}
|
||||
};
|
||||
const addSight = () => {
|
||||
dynamicValidateForm.sights.push({
|
||||
value: undefined,
|
||||
price: undefined,
|
||||
id: Date.now(),
|
||||
});
|
||||
};
|
||||
const onFinish = values => {
|
||||
console.log('Received values of form:', values);
|
||||
console.log('dynamicValidateForm:', dynamicValidateForm);
|
||||
};
|
||||
return {
|
||||
formRef,
|
||||
dynamicValidateForm,
|
||||
onFinish,
|
||||
removeSight,
|
||||
addSight,
|
||||
areas,
|
||||
sights,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -16,7 +16,12 @@ Bind nested fields by array name.
|
|||
|
||||
</docs>
|
||||
<template>
|
||||
<a-form ref="formRef" :model="dynamicValidateForm" autocomplete="off" @finish="onFinish">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
name="dynamic_form_nest_item"
|
||||
:model="dynamicValidateForm"
|
||||
@finish="onFinish"
|
||||
>
|
||||
<a-space
|
||||
v-for="(user, index) in dynamicValidateForm.users"
|
||||
:key="user.id"
|
||||
|
|
@ -58,7 +63,6 @@ Bind nested fields by array name.
|
|||
<script lang="ts">
|
||||
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent, reactive, ref } from 'vue';
|
||||
import type { UnwrapRef } from 'vue';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
|
||||
interface User {
|
||||
|
|
@ -73,7 +77,7 @@ export default defineComponent({
|
|||
},
|
||||
setup() {
|
||||
const formRef = ref<FormInstance>();
|
||||
const dynamicValidateForm: UnwrapRef<{ users: User[] }> = reactive({
|
||||
const dynamicValidateForm = reactive<{ users: User[] }>({
|
||||
users: [],
|
||||
});
|
||||
const removeUser = (item: User) => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,94 @@
|
|||
<docs>
|
||||
---
|
||||
order: 23
|
||||
title:
|
||||
zh-CN: 动态校验规则
|
||||
en-US: Dynamic Rules
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
根据不同情况执行不同的校验规则。
|
||||
|
||||
## en-US
|
||||
|
||||
Perform different check rules according to different situations.
|
||||
|
||||
</docs>
|
||||
<template>
|
||||
<a-form ref="formRef" :model="formState" name="dynamic_rule" v-bind="formItemLayout">
|
||||
<a-form-item
|
||||
label="Username"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: 'Please input your username!' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="Nickname"
|
||||
name="nickname"
|
||||
:rules="[{ required: formState.checkNick, message: 'Please input your nickname!' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.nickname" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="checkNick" v-bind="formTailLayout">
|
||||
<a-checkbox v-model:checked="formState.checkNick">Nickname is required</a-checkbox>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-bind="formTailLayout">
|
||||
<a-button type="primary" @click="onCheck">Check</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, watch } from 'vue';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
|
||||
interface FormState {
|
||||
username: string;
|
||||
nickname: string;
|
||||
checkNick: boolean;
|
||||
}
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const formRef = ref<FormInstance>();
|
||||
const formState = reactive<FormState>({
|
||||
username: '',
|
||||
nickname: '',
|
||||
checkNick: false,
|
||||
});
|
||||
watch(
|
||||
() => formState.checkNick,
|
||||
() => {
|
||||
formRef.value.validateFields(['nickname']);
|
||||
},
|
||||
{ flush: 'post' },
|
||||
);
|
||||
const onCheck = async () => {
|
||||
try {
|
||||
const values = await formRef.value.validateFields();
|
||||
console.log('Success:', values);
|
||||
} catch (errorInfo) {
|
||||
console.log('Failed:', errorInfo);
|
||||
}
|
||||
};
|
||||
const formItemLayout = {
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 8 },
|
||||
};
|
||||
const formTailLayout = {
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 8, offset: 4 },
|
||||
};
|
||||
return {
|
||||
formState,
|
||||
formItemLayout,
|
||||
formTailLayout,
|
||||
onCheck,
|
||||
formRef,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<docs>
|
||||
---
|
||||
order: 8
|
||||
title:
|
||||
zh-CN: 多表单联动
|
||||
en-US: Control between forms
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
本例子中，Modal 的确认按钮在 Form 之外，通过 `form.submit` 方法调用表单提交功能。反之，则推荐使用 `<Button htmlType="submit" />` 调用 web 原生提交逻辑。
|
||||
|
||||
## en-US
|
||||
|
||||
In this case, submit button is in the Modal which is out of Form. You can use `form.submit` to submit form. Besides, we recommend native `<Button htmlType="submit" />` to submit a form.
|
||||
|
||||
</docs>
|
||||
<template>
|
||||
<a-form ref="formRef" :model="formState" name="form_context" v-bind="layout" @finish="onFinish">
|
||||
<a-form-item
|
||||
name="group"
|
||||
label="Group Name"
|
||||
:rules="[{ required: true, message: 'Please input group name!' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.group" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="User List">
|
||||
<template v-if="formState.users.length">
|
||||
<ul>
|
||||
<template v-for="user in formState.users" :key="user.key">
|
||||
<li class="user">
|
||||
<a-avatar>
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
{{ user.name }} - {{ user.age }}
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-typography-text class="ant-form-text" type="secondary">
|
||||
(
|
||||
<SmileOutlined />
|
||||
No user yet. )
|
||||
</a-typography-text>
|
||||
</template>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-bind="tailLayout">
|
||||
<a-button html-type="submit" type="primary">Submit</a-button>
|
||||
<a-button html-type="button" style="margin: 0 8px" @click="visible = true">Add User</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-modal v-model:visible="visible" title="Basic Drawer" @ok="onOk">
|
||||
<a-form ref="modalFormRef" :model="modalFormState" layout="vertical" name="userForm">
|
||||
<a-form-item name="name" label="User Name" :rules="[{ required: true }]">
|
||||
<a-input v-model:value="modalFormState.name" />
|
||||
</a-form-item>
|
||||
<a-form-item name="age" label="User Age" :rules="[{ required: true }]">
|
||||
<a-input-number v-model:value="modalFormState.age" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, watch, toRaw } from 'vue';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
import { SmileOutlined, UserOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
interface UserType {
|
||||
name?: string;
|
||||
age?: number;
|
||||
key?: number;
|
||||
}
|
||||
|
||||
interface FormState {
|
||||
group: string;
|
||||
users: UserType[];
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
SmileOutlined,
|
||||
UserOutlined,
|
||||
},
|
||||
setup() {
|
||||
const formRef = ref<FormInstance>();
|
||||
const modalFormRef = ref<FormInstance>();
|
||||
const visible = ref(false);
|
||||
const formState = reactive<FormState>({
|
||||
group: '',
|
||||
users: [],
|
||||
});
|
||||
const modalFormState = ref<UserType>({});
|
||||
|
||||
watch(
|
||||
visible,
|
||||
() => {
|
||||
modalFormState.value = {};
|
||||
},
|
||||
{ flush: 'post' },
|
||||
);
|
||||
|
||||
const onOk = () => {
|
||||
modalFormRef.value.validateFields().then(() => {
|
||||
formState.users.push({ ...modalFormState.value, key: Date.now() });
|
||||
visible.value = false;
|
||||
});
|
||||
};
|
||||
const onFinish = () => {
|
||||
console.log('Finish:', toRaw(formState));
|
||||
};
|
||||
const layout = {
|
||||
labelCol: { span: 8 },
|
||||
wrapperCol: { span: 16 },
|
||||
};
|
||||
const tailLayout = {
|
||||
wrapperCol: { offset: 8, span: 16 },
|
||||
};
|
||||
return {
|
||||
formState,
|
||||
layout,
|
||||
tailLayout,
|
||||
formRef,
|
||||
modalFormRef,
|
||||
visible,
|
||||
modalFormState,
|
||||
onOk,
|
||||
onFinish,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
#components-form-demo-form-context .user {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#components-form-demo-form-context .user .ant-avatar {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.ant-row-rtl #components-form-demo-form-context .user .ant-avatar {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<docs>
|
||||
---
|
||||
order: 14
|
||||
title:
|
||||
zh-CN: 弹出层中的新建表单
|
||||
en-US: Form in Modal to Create
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
当用户访问一个展示了某个列表的页面，想新建一项但又不想跳转页面时，可以用 Modal 弹出一个表单，用户填写必要信息后创建新的项。
|
||||
|
||||
## en-US
|
||||
|
||||
When user visit a page with a list of items, and want to create a new item. The page can popup a form in Modal, then let user fill in the form to create an item.
|
||||
|
||||
</docs>
|
||||
<template>
|
||||
<div>
|
||||
<a-button type="primary" @click="visible = true">New Collection</a-button>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
title="Create a new collection"
|
||||
ok-text="Create"
|
||||
cancel-text="Cancel"
|
||||
@ok="onOk"
|
||||
>
|
||||
<a-form ref="formRef" :model="formState" layout="vertical" name="form_in_modal">
|
||||
<a-form-item
|
||||
name="title"
|
||||
label="Title"
|
||||
:rules="[{ required: true, message: 'Please input the title of collection!' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.title" />
|
||||
</a-form-item>
|
||||
<a-form-item name="description" label="Description">
|
||||
<a-input v-model:value="formState.description" type="textarea" />
|
||||
</a-form-item>
|
||||
<a-form-item name="modifier" class="collection-create-form_last-form-item">
|
||||
<a-radio-group v-model:value="formState.modifier">
|
||||
<a-radio value="public">Public</a-radio>
|
||||
<a-radio value="private">Private</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, toRaw } from 'vue';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
|
||||
interface Values {
|
||||
title: string;
|
||||
description: string;
|
||||
modifier: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const formRef = ref<FormInstance>();
|
||||
const visible = ref(false);
|
||||
const formState = reactive<Values>({
|
||||
title: '',
|
||||
description: '',
|
||||
modifier: 'public',
|
||||
});
|
||||
|
||||
const onOk = () => {
|
||||
formRef.value
|
||||
.validateFields()
|
||||
.then(values => {
|
||||
console.log('Received values of form: ', values);
|
||||
console.log('formState: ', toRaw(formState));
|
||||
visible.value = false;
|
||||
formRef.value.resetFields();
|
||||
console.log('reset formState: ', toRaw(formState));
|
||||
})
|
||||
.catch(info => {
|
||||
console.log('Validate Failed:', info);
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
formState,
|
||||
formRef,
|
||||
visible,
|
||||
onOk,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.collection-create-form_last-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<docs>
|
||||
---
|
||||
order: 10
|
||||
title:
|
||||
zh-CN: 内联登录栏
|
||||
en-US: Inline Login Form
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
内联登录栏，常用在顶部导航栏中。
|
||||
|
||||
## en-US
|
||||
|
||||
Inline login form is often used in navigation bar.
|
||||
|
||||
</docs>
|
||||
<template>
|
||||
<a-form
|
||||
:model="formState"
|
||||
name="horizontal_login"
|
||||
layout="inline"
|
||||
autocomplete="off"
|
||||
@finish="onFinish"
|
||||
@finishFailed="onFinishFailed"
|
||||
>
|
||||
<a-form-item
|
||||
label="Username"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: 'Please input your username!' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username">
|
||||
<template #prefix>
|
||||
<UserOutlined class="site-form-item-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="Password"
|
||||
name="password"
|
||||
:rules="[{ required: true, message: 'Please input your password!' }]"
|
||||
>
|
||||
<a-input-password v-model:value="formState.password">
|
||||
<template #prefix>
|
||||
<LockOutlined class="site-form-item-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button :disabled="disabled" type="primary" html-type="submit">Log in</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, computed } from 'vue';
|
||||
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
|
||||
interface FormState {
|
||||
username: string;
|
||||
password: string;
|
||||
}
|
||||
export default defineComponent({
|
||||
components: {
|
||||
UserOutlined,
|
||||
LockOutlined,
|
||||
},
|
||||
setup() {
|
||||
const formState = reactive<FormState>({
|
||||
username: '',
|
||||
password: '',
|
||||
});
|
||||
const onFinish = (values: any) => {
|
||||
console.log('Success:', values);
|
||||
};
|
||||
|
||||
const onFinishFailed = (errorInfo: any) => {
|
||||
console.log('Failed:', errorInfo);
|
||||
};
|
||||
const disabled = computed(() => {
|
||||
return !(formState.username && formState.password);
|
||||
});
|
||||
return {
|
||||
formState,
|
||||
onFinish,
|
||||
onFinishFailed,
|
||||
disabled,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue