Skip to content

Commit 96c50cf

Browse files
tangjinzhoutangjinzhou
committed
doc: add form demo
1 parent 51bc530 commit 96c50cf

9 files changed

+584
-10
lines changed

‎components/form/demo/basic.vue

+1-2
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@ Basic Form data control. Includes layout, initial values, validation and submit.
5151
</template>
5252
<script lang="ts">
5353
import { defineComponent, reactive } from 'vue';
54-
import type { UnwrapRef } from 'vue';
5554
5655
interface FormState {
5756
username: string;
@@ -60,7 +59,7 @@ interface FormState {
6059
}
6160
export default defineComponent({
6261
setup() {
63-
const formState: UnwrapRef<FormState> = reactive({
62+
const formState = reactive<FormState>({
6463
username: '',
6564
password: '',
6665
remember: true,

‎components/form/demo/custom-validation.vue

+1-2
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ See more advanced usage at [async-validator](https://github.com/yiminghe/async-v
4747
<script lang="ts">
4848
import type { RuleObject } from 'ant-design-vue/es/form';
4949
import { defineComponent, reactive, ref } from 'vue';
50-
import type { UnwrapRef } from 'vue';
5150
import type { FormInstance } from 'ant-design-vue';
5251
interface FormState {
5352
pass: string;
@@ -57,7 +56,7 @@ interface FormState {
5756
export default defineComponent({
5857
setup() {
5958
const formRef = ref<FormInstance>();
60-
const formState: UnwrapRef<FormState> = reactive({
59+
const formState = reactive<FormState>({
6160
pass: '',
6261
checkPass: '',
6362
age: undefined,

‎components/form/demo/dynamic-form-item.vue

+7-3
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,12 @@ title:
1515
Add or remove form items dynamically.
1616
</docs>
1717
<template>
18-
<a-form ref="formRef" :model="dynamicValidateForm" v-bind="formItemLayoutWithOutLabel">
18+
<a-form
19+
ref="formRef"
20+
name="dynamic_form_item"
21+
:model="dynamicValidateForm"
22+
v-bind="formItemLayoutWithOutLabel"
23+
>
1924
<a-form-item
2025
v-for="(domain, index) in dynamicValidateForm.domains"
2126
:key="domain.key"
@@ -56,7 +61,6 @@ Add or remove form items dynamically.
5661
<script lang="ts">
5762
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
5863
import { defineComponent, reactive, ref } from 'vue';
59-
import type { UnwrapRef } from 'vue';
6064
import type { FormInstance } from 'ant-design-vue';
6165
6266
interface Domain {
@@ -86,7 +90,7 @@ export default defineComponent({
8690
sm: { span: 20, offset: 4 },
8791
},
8892
};
89-
const dynamicValidateForm: UnwrapRef<{ domains: Domain[] }> = reactive({
93+
const dynamicValidateForm = reactive<{ domains: Domain[] }>({
9094
domains: [],
9195
});
9296
const submitForm = () => {

‎components/form/demo/dynamic-form-items-complex.vue

+138
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<docs>
2+
---
3+
order: 4.2
4+
title:
5+
zh-CN: 复杂的动态增减表单项
6+
en-US: Complex Dynamic Form Item
7+
---
8+
9+
## zh-CN
10+
11+
这个例子演示了一个表单中包含多个表单控件的情况。
12+
13+
## en-US
14+
15+
This example demonstrates the case that a form contains multiple form controls.
16+
17+
</docs>
18+
<template>
19+
<a-form
20+
ref="formRef"
21+
name="dynamic_form_nest_item"
22+
:model="dynamicValidateForm"
23+
@finish="onFinish"
24+
>
25+
<a-form-item name="area" label="Area" :rules="[{ required: true, message: 'Missing area' }]">
26+
<a-select v-model:value="dynamicValidateForm.area" :options="areas" />
27+
</a-form-item>
28+
<a-space
29+
v-for="(sight, index) in dynamicValidateForm.sights"
30+
:key="sight.id"
31+
style="display: flex; margin-bottom: 8px"
32+
align="baseline"
33+
>
34+
<a-form-item
35+
:name="['sights', index, 'value']"
36+
label="Sight"
37+
:rules="{
38+
required: true,
39+
message: 'Missing sight',
40+
}"
41+
>
42+
<a-select
43+
v-model:value="sight.value"
44+
:disabled="!dynamicValidateForm.area"
45+
:options="(sights[dynamicValidateForm.area] || []).map(a => ({ value: a }))"
46+
style="width: 130px"
47+
></a-select>
48+
</a-form-item>
49+
<a-form-item
50+
label="Price"
51+
:name="['sights', index, 'price']"
52+
:rules="{
53+
required: true,
54+
message: 'Missing price',
55+
}"
56+
>
57+
<a-input v-model:value="sight.price" />
58+
</a-form-item>
59+
<MinusCircleOutlined @click="removeSight(sight)" />
60+
</a-space>
61+
<a-form-item>
62+
<a-button type="dashed" block @click="addSight">
63+
<PlusOutlined />
64+
Add sights
65+
</a-button>
66+
</a-form-item>
67+
<a-form-item>
68+
<a-button type="primary" html-type="submit">Submit</a-button>
69+
</a-form-item>
70+
</a-form>
71+
</template>
72+
73+
<script lang="ts">
74+
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
75+
import { defineComponent, reactive, ref, watch } from 'vue';
76+
import type { FormInstance } from 'ant-design-vue';
77+
78+
interface Sights {
79+
value: string;
80+
price: string;
81+
id: number;
82+
}
83+
export default defineComponent({
84+
components: {
85+
MinusCircleOutlined,
86+
PlusOutlined,
87+
},
88+
setup() {
89+
const areas = [
90+
{ label: 'Beijing', value: 'Beijing' },
91+
{ label: 'Shanghai', value: 'Shanghai' },
92+
];
93+
94+
const sights = {
95+
Beijing: ['Tiananmen', 'Great Wall'],
96+
Shanghai: ['Oriental Pearl', 'The Bund'],
97+
};
98+
99+
const formRef = ref<FormInstance>();
100+
const dynamicValidateForm = reactive<{ sights: Sights[]; area: string }>({
101+
sights: [],
102+
area: undefined,
103+
});
104+
watch(
105+
() => dynamicValidateForm.area,
106+
() => {
107+
dynamicValidateForm.sights = [];
108+
},
109+
);
110+
const removeSight = (item: Sights) => {
111+
let index = dynamicValidateForm.sights.indexOf(item);
112+
if (index !== -1) {
113+
dynamicValidateForm.sights.splice(index, 1);
114+
}
115+
};
116+
const addSight = () => {
117+
dynamicValidateForm.sights.push({
118+
value: undefined,
119+
price: undefined,
120+
id: Date.now(),
121+
});
122+
};
123+
const onFinish = values => {
124+
console.log('Received values of form:', values);
125+
console.log('dynamicValidateForm:', dynamicValidateForm);
126+
};
127+
return {
128+
formRef,
129+
dynamicValidateForm,
130+
onFinish,
131+
removeSight,
132+
addSight,
133+
areas,
134+
sights,
135+
};
136+
},
137+
});
138+
</script>

‎components/form/demo/dynamic-form-items.vue

+7-3
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,12 @@ Bind nested fields by array name.
1616

1717
</docs>
1818
<template>
19-
<a-form ref="formRef" :model="dynamicValidateForm" autocomplete="off" @finish="onFinish">
19+
<a-form
20+
ref="formRef"
21+
name="dynamic_form_nest_item"
22+
:model="dynamicValidateForm"
23+
@finish="onFinish"
24+
>
2025
<a-space
2126
v-for="(user, index) in dynamicValidateForm.users"
2227
:key="user.id"
@@ -58,7 +63,6 @@ Bind nested fields by array name.
5863
<script lang="ts">
5964
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
6065
import { defineComponent, reactive, ref } from 'vue';
61-
import type { UnwrapRef } from 'vue';
6266
import type { FormInstance } from 'ant-design-vue';
6367
6468
interface User {
@@ -73,7 +77,7 @@ export default defineComponent({
7377
},
7478
setup() {
7579
const formRef = ref<FormInstance>();
76-
const dynamicValidateForm: UnwrapRef<{ users: User[] }> = reactive({
80+
const dynamicValidateForm = reactive<{ users: User[] }>({
7781
users: [],
7882
});
7983
const removeUser = (item: User) => {

‎components/form/demo/dynamic-rule.vue

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<docs>
2+
---
3+
order: 23
4+
title:
5+
zh-CN: 动态校验规则
6+
en-US: Dynamic Rules
7+
---
8+
9+
## zh-CN
10+
11+
根据不同情况执行不同的校验规则。
12+
13+
## en-US
14+
15+
Perform different check rules according to different situations.
16+
17+
</docs>
18+
<template>
19+
<a-form ref="formRef" :model="formState" name="dynamic_rule" v-bind="formItemLayout">
20+
<a-form-item
21+
label="Username"
22+
name="username"
23+
:rules="[{ required: true, message: 'Please input your username!' }]"
24+
>
25+
<a-input v-model:value="formState.username" />
26+
</a-form-item>
27+
28+
<a-form-item
29+
label="Nickname"
30+
name="nickname"
31+
:rules="[{ required: formState.checkNick, message: 'Please input your nickname!' }]"
32+
>
33+
<a-input v-model:value="formState.nickname" />
34+
</a-form-item>
35+
36+
<a-form-item name="checkNick" v-bind="formTailLayout">
37+
<a-checkbox v-model:checked="formState.checkNick">Nickname is required</a-checkbox>
38+
</a-form-item>
39+
40+
<a-form-item v-bind="formTailLayout">
41+
<a-button type="primary" @click="onCheck">Check</a-button>
42+
</a-form-item>
43+
</a-form>
44+
</template>
45+
<script lang="ts">
46+
import { defineComponent, reactive, ref, watch } from 'vue';
47+
import type { FormInstance } from 'ant-design-vue';
48+
49+
interface FormState {
50+
username: string;
51+
nickname: string;
52+
checkNick: boolean;
53+
}
54+
export default defineComponent({
55+
setup() {
56+
const formRef = ref<FormInstance>();
57+
const formState = reactive<FormState>({
58+
username: '',
59+
nickname: '',
60+
checkNick: false,
61+
});
62+
watch(
63+
() => formState.checkNick,
64+
() => {
65+
formRef.value.validateFields(['nickname']);
66+
},
67+
{ flush: 'post' },
68+
);
69+
const onCheck = async () => {
70+
try {
71+
const values = await formRef.value.validateFields();
72+
console.log('Success:', values);
73+
} catch (errorInfo) {
74+
console.log('Failed:', errorInfo);
75+
}
76+
};
77+
const formItemLayout = {
78+
labelCol: { span: 4 },
79+
wrapperCol: { span: 8 },
80+
};
81+
const formTailLayout = {
82+
labelCol: { span: 4 },
83+
wrapperCol: { span: 8, offset: 4 },
84+
};
85+
return {
86+
formState,
87+
formItemLayout,
88+
formTailLayout,
89+
onCheck,
90+
formRef,
91+
};
92+
},
93+
});
94+
</script>

0 commit comments

Comments
 (0)