Skip to content

Commit 5b5d1cd

Browse files
tangjinzhoutangjinzhou
committed
doc: add form demo
1 parent 9172ea9 commit 5b5d1cd

File tree

4 files changed

+152
-61
lines changed

4 files changed

+152
-61
lines changed

‎components/form/demo/basic.vue

+43-59
Original file line numberDiff line numberDiff line change
@@ -15,83 +15,67 @@ title:
1515
Basic Form data control. Includes layout, initial values, validation and submit.
1616
</docs>
1717
<template>
18-
<a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
19-
<a-form-item label="Activity name">
20-
<a-input v-model:value="formState.name" />
18+
<a-form
19+
:model="formState"
20+
name="basic"
21+
:label-col="{ span: 8 }"
22+
:wrapper-col="{ span: 16 }"
23+
autocomplete="off"
24+
@finish="onFinish"
25+
@finishFailed="onFinishFailed"
26+
>
27+
<a-form-item
28+
label="Username"
29+
name="username"
30+
:rules="[{ required: true, message: 'Please input your username!' }]"
31+
>
32+
<a-input v-model:value="formState.username" />
2133
</a-form-item>
22-
<a-form-item label="Activity zone">
23-
<a-select v-model:value="formState.region" placeholder="please select your zone">
24-
<a-select-option value="shanghai">Zone one</a-select-option>
25-
<a-select-option value="beijing">Zone two</a-select-option>
26-
</a-select>
27-
</a-form-item>
28-
<a-form-item label="Activity time">
29-
<a-date-picker
30-
v-model:value="formState.date1"
31-
show-time
32-
type="date"
33-
placeholder="Pick a date"
34-
style="width: 100%"
35-
/>
36-
</a-form-item>
37-
<a-form-item label="Instant delivery">
38-
<a-switch v-model:checked="formState.delivery" />
39-
</a-form-item>
40-
<a-form-item label="Activity type">
41-
<a-checkbox-group v-model:value="formState.type">
42-
<a-checkbox value="1" name="type">Online</a-checkbox>
43-
<a-checkbox value="2" name="type">Promotion</a-checkbox>
44-
<a-checkbox value="3" name="type">Offline</a-checkbox>
45-
</a-checkbox-group>
46-
</a-form-item>
47-
<a-form-item label="Resources">
48-
<a-radio-group v-model:value="formState.resource">
49-
<a-radio value="1">Sponsor</a-radio>
50-
<a-radio value="2">Venue</a-radio>
51-
</a-radio-group>
34+
35+
<a-form-item
36+
label="Password"
37+
name="password"
38+
:rules="[{ required: true, message: 'Please input your password!' }]"
39+
>
40+
<a-input-password v-model:value="formState.password" />
5241
</a-form-item>
53-
<a-form-item label="Activity form">
54-
<a-input v-model:value="formState.desc" type="textarea" />
42+
43+
<a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
44+
<a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
5545
</a-form-item>
56-
<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
57-
<a-button type="primary" @click="onSubmit">Create</a-button>
58-
<a-button style="margin-left: 10px">Cancel</a-button>
46+
47+
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
48+
<a-button type="primary" html-type="submit">Submit</a-button>
5949
</a-form-item>
6050
</a-form>
6151
</template>
6252
<script lang="ts">
63-
import { Dayjs } from 'dayjs';
64-
import { defineComponent, reactive, toRaw } from 'vue';
53+
import { defineComponent, reactive } from 'vue';
6554
import type { UnwrapRef } from 'vue';
6655
6756
interface FormState {
68-
name: string;
69-
region: string | undefined;
70-
date1: Dayjs | undefined;
71-
delivery: boolean;
72-
type: string[];
73-
resource: string;
74-
desc: string;
57+
username: string;
58+
password: string;
59+
remember: boolean;
7560
}
7661
export default defineComponent({
7762
setup() {
7863
const formState: UnwrapRef<FormState> = reactive({
79-
name: '',
80-
region: undefined,
81-
date1: undefined,
82-
delivery: false,
83-
type: [],
84-
resource: '',
85-
desc: '',
64+
username: '',
65+
password: '',
66+
remember: true,
8667
});
87-
const onSubmit = () => {
88-
console.log('submit!', toRaw(formState));
68+
const onFinish = (values: any) => {
69+
console.log('Success:', values);
70+
};
71+
72+
const onFinishFailed = (errorInfo: any) => {
73+
console.log('Failed:', errorInfo);
8974
};
9075
return {
91-
labelCol: { span: 4 },
92-
wrapperCol: { span: 14 },
9376
formState,
94-
onSubmit,
77+
onFinish,
78+
onFinishFailed,
9579
};
9680
},
9781
});

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,15 @@ See more advanced usage at [async-validator](https://github.com/yiminghe/async-v
4848
import type { RuleObject } from 'ant-design-vue/es/form';
4949
import { defineComponent, reactive, ref } from 'vue';
5050
import type { UnwrapRef } from 'vue';
51+
import type { FormInstance } from 'ant-design-vue';
5152
interface FormState {
5253
pass: string;
5354
checkPass: string;
5455
age: number | undefined;
5556
}
5657
export default defineComponent({
5758
setup() {
58-
const formRef = ref();
59+
const formRef = ref<FormInstance>();
5960
const formState: UnwrapRef<FormState> = reactive({
6061
pass: '',
6162
checkPass: '',

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ Add or remove form items dynamically.
5757
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
5858
import { defineComponent, reactive, ref } from 'vue';
5959
import type { UnwrapRef } from 'vue';
60+
import type { FormInstance } from 'ant-design-vue';
6061
6162
interface Domain {
6263
value: string;
@@ -68,7 +69,7 @@ export default defineComponent({
6869
PlusOutlined,
6970
},
7071
setup() {
71-
const formRef = ref();
72+
const formRef = ref<FormInstance>();
7273
const formItemLayout = {
7374
labelCol: {
7475
xs: { span: 24 },

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

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<docs>
2+
---
3+
order: 4.1
4+
title:
5+
zh-CN: 动态增减嵌套字段
6+
en-US: Dynamic Form nest Items
7+
---
8+
9+
## zh-CN
10+
11+
通过数组 name 绑定嵌套字段
12+
13+
## en-US
14+
15+
Bind nested fields by array name.
16+
17+
</docs>
18+
<template>
19+
<a-form ref="formRef" :model="dynamicValidateForm" autocomplete="off" @finish="onFinish">
20+
<a-space
21+
v-for="(user, index) in dynamicValidateForm.users"
22+
:key="user.id"
23+
style="display: flex; margin-bottom: 8px"
24+
align="baseline"
25+
>
26+
<a-form-item
27+
:name="['users', index, 'first']"
28+
:rules="{
29+
required: true,
30+
message: 'Missing first name',
31+
}"
32+
>
33+
<a-input v-model:value="user.first" placeholder="First Name" />
34+
</a-form-item>
35+
<a-form-item
36+
:name="['users', index, 'last']"
37+
:rules="{
38+
required: true,
39+
message: 'Missing last name',
40+
}"
41+
>
42+
<a-input v-model:value="user.last" placeholder="Last Name" />
43+
</a-form-item>
44+
<MinusCircleOutlined @click="removeUser(user)" />
45+
</a-space>
46+
<a-form-item>
47+
<a-button type="dashed" block @click="addUser">
48+
<PlusOutlined />
49+
Add user
50+
</a-button>
51+
</a-form-item>
52+
<a-form-item>
53+
<a-button type="primary" html-type="submit">Submit</a-button>
54+
</a-form-item>
55+
</a-form>
56+
</template>
57+
58+
<script lang="ts">
59+
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
60+
import { defineComponent, reactive, ref } from 'vue';
61+
import type { UnwrapRef } from 'vue';
62+
import type { FormInstance } from 'ant-design-vue';
63+
64+
interface User {
65+
first: string;
66+
last: string;
67+
id: number;
68+
}
69+
export default defineComponent({
70+
components: {
71+
MinusCircleOutlined,
72+
PlusOutlined,
73+
},
74+
setup() {
75+
const formRef = ref<FormInstance>();
76+
const dynamicValidateForm: UnwrapRef<{ users: User[] }> = reactive({
77+
users: [],
78+
});
79+
const removeUser = (item: User) => {
80+
let index = dynamicValidateForm.users.indexOf(item);
81+
if (index !== -1) {
82+
dynamicValidateForm.users.splice(index, 1);
83+
}
84+
};
85+
const addUser = () => {
86+
dynamicValidateForm.users.push({
87+
first: '',
88+
last: '',
89+
id: Date.now(),
90+
});
91+
};
92+
const onFinish = values => {
93+
console.log('Received values of form:', values);
94+
console.log('dynamicValidateForm.users:', dynamicValidateForm.users);
95+
};
96+
return {
97+
formRef,
98+
dynamicValidateForm,
99+
onFinish,
100+
removeUser,
101+
addUser,
102+
};
103+
},
104+
});
105+
</script>

0 commit comments

Comments
 (0)