Skip to content

Commit 3c0979c

Browse files
tangjinzhoutangjinzhou
committed
doc: add form demo
1 parent ed37400 commit 3c0979c

File tree

7 files changed

+733
-11
lines changed

7 files changed

+733
-11
lines changed

‎components/form/__tests__/__snapshots__/demo.test.js.snap

+410-10
Large diffs are not rendered by default.

‎components/form/demo/form-in-modal.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ When user visit a page with a list of items, and want to create a new item. The
3434
<a-input v-model:value="formState.title" />
3535
</a-form-item>
3636
<a-form-item name="description" label="Description">
37-
<a-input v-model:value="formState.description" type="textarea" />
37+
<a-textarea v-model:value="formState.description" />
3838
</a-form-item>
3939
<a-form-item name="modifier" class="collection-create-form_last-form-item">
4040
<a-radio-group v-model:value="formState.modifier">

‎components/form/demo/index.vue

+6
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
<dynamicRuleVue />
1818
<formContextVue />
1919
<formInModalVue />
20+
<timeRelatedControlsVue />
21+
<validateOtherVue />
2022
<UseFormBasic />
2123
<UseFormNested />
2224
<UseFormTrigger />
@@ -46,13 +48,17 @@ import UseFormNested from './useForm-nested.vue';
4648
import UseFormTrigger from './useForm-trigger.vue';
4749
import UseFormMerge from './useForm-merge.vue';
4850
import CustomizedFormControls from './customized-form-controls.vue';
51+
import timeRelatedControlsVue from './time-related-controls.vue';
52+
import validateOtherVue from './validate-other.vue';
4953
import CN from '../index.zh-CN.md';
5054
import US from '../index.en-US.md';
5155
5256
export default defineComponent({
5357
US,
5458
CN,
5559
components: {
60+
timeRelatedControlsVue,
61+
validateOtherVue,
5662
Basic,
5763
CustomValidation,
5864
DynamicFormItem,

‎components/form/demo/time-related-controls.vue

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<docs>
2+
---
3+
order: 16
4+
title:
5+
zh-CN: 时间类控件
6+
en-US: Time-related Controls
7+
---
8+
9+
## zh-CN
10+
11+
时间类组件的 `value` 类型为 `dayjs` 对象，所以在提交服务器前需要预处理。
12+
13+
或者使用 `valueFormat` 组件内部会自动处理。
14+
15+
## en-US
16+
17+
The `value` of time-related components is a `dayjs` object, which we need to pre-process it before we submit to server.
18+
19+
or use `valueFormat` to format.
20+
</docs>
21+
<template>
22+
<a-form
23+
:model="formState"
24+
name="time_related_controls"
25+
v-bind="formItemLayout"
26+
@finish="onFinish"
27+
@finishFailed="onFinishFailed"
28+
>
29+
<a-form-item name="date-picker" label="DatePicker" v-bind="config">
30+
<a-date-picker v-model:value="formState['date-picker']" value-format="YYYY-MM-DD" />
31+
</a-form-item>
32+
<a-form-item name="date-time-picker" label="DatePicker[showTime]" v-bind="config">
33+
<a-date-picker
34+
v-model:value="formState['date-time-picker']"
35+
show-time
36+
format="YYYY-MM-DD HH:mm:ss"
37+
value-format="YYYY-MM-DD HH:mm:ss"
38+
/>
39+
</a-form-item>
40+
<a-form-item name="month-picker" label="MonthPicker" v-bind="config">
41+
<a-date-picker
42+
v-model:value="formState['month-picker']"
43+
value-format="YYYY-MM"
44+
picker="month"
45+
/>
46+
</a-form-item>
47+
<a-form-item name="range-picker" label="RangePicker" v-bind="rangeConfig">
48+
<a-range-picker v-model:value="formState['range-picker']" value-format="YYYY-MM-DD" />
49+
</a-form-item>
50+
<a-form-item name="range-time-picker" label="RangePicker[showTime]" v-bind="rangeConfig">
51+
<a-range-picker
52+
v-model:value="formState['range-time-picker']"
53+
show-time
54+
format="YYYY-MM-DD HH:mm:ss"
55+
value-format="YYYY-MM-DD HH:mm:ss"
56+
/>
57+
</a-form-item>
58+
<a-form-item name="time-picker" label="TimePicker" v-bind="config">
59+
<a-time-picker v-model:value="formState['time-picker']" value-format="HH:mm:ss" />
60+
</a-form-item>
61+
<a-form-item
62+
:wrapper-col="{
63+
xs: { span: 24, offset: 0 },
64+
sm: { span: 16, offset: 8 },
65+
}"
66+
>
67+
<a-button type="primary" html-type="submit">Submit</a-button>
68+
</a-form-item>
69+
</a-form>
70+
</template>
71+
<script lang="ts">
72+
import { defineComponent, reactive } from 'vue';
73+
74+
interface FormState {
75+
'date-picker': string;
76+
'date-time-picker': string;
77+
'month-picker': string;
78+
'range-picker': [string, string];
79+
'range-time-picker': [string, string];
80+
'time-picker': string;
81+
}
82+
export default defineComponent({
83+
setup() {
84+
const formItemLayout = {
85+
labelCol: {
86+
xs: { span: 24 },
87+
sm: { span: 8 },
88+
},
89+
wrapperCol: {
90+
xs: { span: 24 },
91+
sm: { span: 16 },
92+
},
93+
};
94+
const config = {
95+
rules: [{ type: 'string' as const, required: true, message: 'Please select time!' }],
96+
};
97+
const rangeConfig = {
98+
rules: [{ type: 'array' as const, required: true, message: 'Please select time!' }],
99+
};
100+
const formState = reactive({} as FormState);
101+
const onFinish = (values: any) => {
102+
console.log('Success:', values, formState);
103+
};
104+
105+
const onFinishFailed = (errorInfo: any) => {
106+
console.log('Failed:', errorInfo);
107+
};
108+
return {
109+
formState,
110+
onFinish,
111+
onFinishFailed,
112+
formItemLayout,
113+
config,
114+
rangeConfig,
115+
};
116+
},
117+
});
118+
</script>

‎components/form/demo/validate-other.vue

+196
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
<docs>
2+
---
3+
order: 24
4+
title:
5+
zh-CN: 校验其他组件
6+
en-US: Other Form Controls
7+
---
8+
9+
## zh-CN
10+
11+
以上演示没有出现的表单控件对应的校验演示。
12+
13+
## en-US
14+
15+
Demonstration of validation configuration for form controls which are not shown in the demos above.
16+
</docs>
17+
<template>
18+
<a-form
19+
:model="formState"
20+
name="validate_other"
21+
v-bind="formItemLayout"
22+
@finishFailed="onFinishFailed"
23+
@finish="onFinish"
24+
>
25+
<a-form-item label="Plain Text">
26+
<span class="ant-form-text">China</span>
27+
</a-form-item>
28+
<a-form-item
29+
name="select"
30+
label="Select"
31+
has-feedback
32+
:rules="[{ required: true, message: 'Please select your country!' }]"
33+
>
34+
<a-select v-model:value="formState.select" placeholder="Please select a country">
35+
<a-select-option value="china">China</a-select-option>
36+
<a-select-option value="usa">U.S.A</a-select-option>
37+
</a-select>
38+
</a-form-item>
39+
40+
<a-form-item
41+
name="select-multiple"
42+
label="Select[multiple]"
43+
:rules="[{ required: true, message: 'Please select your favourite colors!', type: 'array' }]"
44+
>
45+
<a-select
46+
v-model:value="formState['select-multiple']"
47+
mode="multiple"
48+
placeholder="Please select favourite colors"
49+
>
50+
<a-select-option value="red">Red</a-select-option>
51+
<a-select-option value="green">Green</a-select-option>
52+
<a-select-option value="blue">Blue</a-select-option>
53+
</a-select>
54+
</a-form-item>
55+
56+
<a-form-item label="InputNumber">
57+
<a-form-item name="input-number" no-style>
58+
<a-input-number v-model:value="formState['input-number']" :min="1" :max="10" />
59+
</a-form-item>
60+
<span class="ant-form-text">machines</span>
61+
</a-form-item>
62+
63+
<a-form-item name="switch" label="Switch">
64+
<a-switch v-model:checked="formState.switch" />
65+
</a-form-item>
66+
67+
<a-form-item name="slider" label="Slider">
68+
<a-slider
69+
v-model:value="formState.slider"
70+
:marks="{
71+
0: 'A',
72+
20: 'B',
73+
40: 'C',
74+
60: 'D',
75+
80: 'E',
76+
100: 'F',
77+
}"
78+
/>
79+
</a-form-item>
80+
81+
<a-form-item name="radio-group" label="Radio.Group">
82+
<a-radio-group v-model:value="formState['radio-group']">
83+
<a-radio value="a">item 1</a-radio>
84+
<a-radio value="b">item 2</a-radio>
85+
<a-radio value="c">item 3</a-radio>
86+
</a-radio-group>
87+
</a-form-item>
88+
89+
<a-form-item
90+
name="radio-button"
91+
label="Radio.Button"
92+
:rules="[{ required: true, message: 'Please pick an item!' }]"
93+
>
94+
<a-radio-group v-model:value="formState['radio-button']">
95+
<a-radio-button value="a">item 1</a-radio-button>
96+
<a-radio-button value="b">item 2</a-radio-button>
97+
<a-radio-button value="c">item 3</a-radio-button>
98+
</a-radio-group>
99+
</a-form-item>
100+
101+
<a-form-item name="checkbox-group" label="Checkbox.Group">
102+
<a-checkbox-group v-model:value="formState['checkbox-group']">
103+
<a-row>
104+
<a-col :span="8">
105+
<a-checkbox value="A" style="line-height: 32px">A</a-checkbox>
106+
</a-col>
107+
<a-col :span="8">
108+
<a-checkbox value="B" style="line-height: 32px" disabled>B</a-checkbox>
109+
</a-col>
110+
<a-col :span="8">
111+
<a-checkbox value="C" style="line-height: 32px">C</a-checkbox>
112+
</a-col>
113+
<a-col :span="8">
114+
<a-checkbox value="D" style="line-height: 32px">D</a-checkbox>
115+
</a-col>
116+
<a-col :span="8">
117+
<a-checkbox value="E" style="line-height: 32px">E</a-checkbox>
118+
</a-col>
119+
<a-col :span="8">
120+
<a-checkbox value="F" style="line-height: 32px">F</a-checkbox>
121+
</a-col>
122+
</a-row>
123+
</a-checkbox-group>
124+
</a-form-item>
125+
126+
<a-form-item name="rate" label="Rate">
127+
<a-rate v-model:value="formState.rate" allow-half />
128+
</a-form-item>
129+
130+
<a-form-item name="upload" label="Upload" extra="longgggggggggggggggggggggggggggggggggg">
131+
<a-upload
132+
v-model:fileList="formState.upload"
133+
name="logo"
134+
action="/upload.do"
135+
list-type="picture"
136+
>
137+
<a-button>
138+
<template #icon><UploadOutlined /></template>
139+
Click to upload
140+
</a-button>
141+
</a-upload>
142+
</a-form-item>
143+
144+
<a-form-item label="Dragger">
145+
<a-form-item name="dragger" no-style>
146+
<a-upload-dragger v-model:fileList="formState.dragger" name="files" action="/upload.do">
147+
<p class="ant-upload-drag-icon">
148+
<InboxOutlined />
149+
</p>
150+
<p class="ant-upload-text">Click or drag file to this area to upload</p>
151+
<p class="ant-upload-hint">Support for a single or bulk upload.</p>
152+
</a-upload-dragger>
153+
</a-form-item>
154+
</a-form-item>
155+
156+
<a-form-item :wrapper-col="{ span: 12, offset: 6 }">
157+
<a-button type="primary" html-type="submit">Submit</a-button>
158+
</a-form-item>
159+
</a-form>
160+
</template>
161+
<script lang="ts">
162+
import { defineComponent, reactive } from 'vue';
163+
import { UploadOutlined, InboxOutlined } from '@ant-design/icons-vue';
164+
165+
export default defineComponent({
166+
components: {
167+
UploadOutlined,
168+
InboxOutlined,
169+
},
170+
setup() {
171+
const formItemLayout = {
172+
labelCol: { span: 6 },
173+
wrapperCol: { span: 14 },
174+
};
175+
176+
const formState = reactive<Record<string, any>>({
177+
'input-number': 3,
178+
'checkbox-group': ['A', 'B'],
179+
rate: 3.5,
180+
});
181+
const onFinish = (values: any) => {
182+
console.log('Success:', values);
183+
};
184+
185+
const onFinishFailed = (errorInfo: any) => {
186+
console.log('Failed:', errorInfo);
187+
};
188+
return {
189+
formState,
190+
onFinish,
191+
onFinishFailed,
192+
formItemLayout,
193+
};
194+
},
195+
});
196+
</script>

‎components/form/index.en-US.md

+1
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ A form consists of one or more form fields whose type includes input, textarea,
4343
| name | Form name. Will be the prefix of Field `id` | string | - | 2.0.0 |
4444
| scrollToFirstError | Auto scroll to first failed field when submit | boolean \| [options](https://github.com/stipsan/scroll-into-view-if-needed/#options) | false | 2.0.0 |
4545
| validateTrigger | Config field validate trigger | string \| string[] | `change` | 2.0.0 |
46+
| noStyle | No style for `true`, used as a pure field control | boolean | false | 3.0 |
4647

4748
### Events
4849

‎components/form/index.zh-CN.md

+1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
4444
| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean \| [options](https://github.com/stipsan/scroll-into-view-if-needed/#options) | false | 2.0.0 |
4545
| name | 表单名称，会作为表单字段 `id` 前缀使用 | string | - | 2.0.0 |
4646
| validateTrigger | 统一设置字段校验规则 | string \| string[] | `change` | 2.0.0 |
47+
| noStyle | 为 `true` 时不带样式，作为纯字段控件使用 | boolean | false | 3.0 |
4748

4849
### 事件
4950

0 commit comments

Comments
 (0)