Skip to content

Commit 787d51f

Browse files
tangjinzhoutangjinzhou
committed
feat: form
1 parent fb22422 commit 787d51f

File tree

9 files changed

+354
-51
lines changed

9 files changed

+354
-51
lines changed

‎components/form/demo/index.vue

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<script>
2+
3+
import AdvancedSearch from './advanced-search'
4+
// import Coordinated from './coordinated'
5+
// import CustomizedFormControls from './customized-form-controls'
6+
// import DynamicFormItem from './dynamic-form-item'
7+
// import DynamicRule from './dynamic-rule'
8+
// import FormInModal from './form-in-modal'
9+
// import GlobalState from './global-state'
10+
// import HorizontalLogin from './horizontal-login'
11+
// import Layout from './layout'
12+
// import NormalLogin from './normal-login'
13+
// import Register from './register'
14+
// import TimeRelatedControls from './time-related-controls'
15+
// import ValidateOther from './validate-other'
16+
// import ValidateStatic from './validate-static'
17+
// import WithoutFormCreate from './without-form-create'
18+
19+
import CN from './../index.zh-CN'
20+
import US from './../index.en-US'
21+
22+
const md = {
23+
cn: `# Form 表单
24+
具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
25+
26+
## 表单
27+
28+
我们为 \`form\` 提供了以下三种排列方式：
29+
30+
- 水平排列：标签和表单控件水平排列；（默认）
31+
- 垂直排列：标签和表单控件上下垂直排列；
32+
- 行内排列：表单项水平行内排列。
33+
34+
## 表单域
35+
36+
表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。
37+
38+
这里我们封装了表单域 \`<Form.Item />\` 。
39+
40+
**注意：** 如果使用 \`Form.create\` 处理表单使其具有自动收集数据并校验的功能，建议使用\`jsx\`
41+
## 代码演示
42+
`,
43+
us: `# Form
44+
Form is used to collect, validate, and submit the user input, usually contains various form items including checkbox, radio, input, select, and etc.
45+
46+
## Form
47+
48+
You can align the controls of a \`form\` using the \`layout\` prop：
49+
50+
- \`horizontal\`：to horizontally align the \`label\`s and controls of the fields. (Default)
51+
- \`vertical\`：to vertically align the \`label\`s and controls of the fields.
52+
- \`inline\`：to render form fields in one line.
53+
54+
## Form fields
55+
56+
A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more.
57+
A form field is defined using \`<Form.Item />\`.
58+
59+
**Note:** If you use \`Form.create\` to process forms with automatic data collection and validation, we recommend using \`jsx\`
60+
## Examples
61+
`,
62+
}
63+
64+
export default {
65+
category: 'Components',
66+
subtitle: '表单',
67+
type: 'Data Entry',
68+
cols: 1,
69+
title: 'Form',
70+
render () {
71+
return (
72+
<div>
73+
<md cn={md.cn} us={md.us} />
74+
<AdvancedSearch />
75+
{/* <Coordinated />
76+
<CustomizedFormControls />
77+
<DynamicFormItem />
78+
<DynamicRule />
79+
<FormInModal />
80+
<GlobalState />
81+
<HorizontalLogin />
82+
<Layout />
83+
<NormalLogin />
84+
<Register />
85+
<TimeRelatedControls />
86+
<ValidateStatic />
87+
<WithoutFormCreate />
88+
<ValidateOther />
89+
*/}
90+
<api>
91+
<CN slot='cn' />
92+
<US />
93+
</api>
94+
</div>
95+
)
96+
},
97+
}
98+
</script>

‎components/form/demo/validate-static.md

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
<cn>
2+
#### 自定义校验
3+
我们提供了 `validateStatus` `help` `hasFeedback` 等属性，你可以不需要使用 `Form.create` 和 `getFieldDecorator`，自己定义校验的时机和内容。
4+
1. `validateStatus`: 校验状态，可选 'success', 'warning', 'error', 'validating'。
5+
2. `hasFeedback`：用于给输入框添加反馈图标。
6+
3. `help`：设置校验文案。
7+
</cn>
8+
9+
<us>
10+
#### Customized Validation
11+
We provide properties like `validateStatus` `help` `hasFeedback` to customize your own validate status and message, without using `Form.create` and `getFieldDecorator`.
12+
1. `validateStatus`: validate status of form components which could be 'success', 'warning', 'error', 'validating'.
13+
2. `hasFeedback`: display feed icon of input control
14+
3. `help`: display validate message.
15+
</us>
16+
17+
```html
18+
<template>
19+
<a-form>
20+
<a-form-item
21+
:labelCol="labelCol"
22+
:wrapperCol="wrapperCol"
23+
label='Fail'
24+
validateStatus='error'
25+
help='Should be combination of numbers & alphabets'
26+
>
27+
<a-input placeholder='unavailable choice' id='error' />
28+
</a-form-item>
29+
30+
<a-form-item
31+
:labelCol="labelCol"
32+
:wrapperCol="wrapperCol"
33+
label='Warning'
34+
validateStatus='warning'
35+
>
36+
<a-input placeholder='Warning' id='warning' />
37+
</a-form-item>
38+
39+
<a-form-item
40+
:labelCol="labelCol"
41+
:wrapperCol="wrapperCol"
42+
label='Validating'
43+
hasFeedback
44+
validateStatus='validating'
45+
help='The information is being validated...'
46+
>
47+
<a-input placeholder="I'm the content is being validated" id='validating' />
48+
</a-form-item>
49+
50+
<a-form-item
51+
:labelCol="labelCol"
52+
:wrapperCol="wrapperCol"
53+
label='Success'
54+
hasFeedback
55+
validateStatus='success'
56+
>
57+
<a-input placeholder="I'm the content" id='success' />
58+
</a-form-item>
59+
60+
<a-form-item
61+
:labelCol="labelCol"
62+
:wrapperCol="wrapperCol"
63+
label='Warning'
64+
hasFeedback
65+
validateStatus='warning'
66+
>
67+
<a-input placeholder='Warning' id='warning' />
68+
</a-form-item>
69+
70+
<a-form-item
71+
:labelCol="labelCol"
72+
:wrapperCol="wrapperCol"
73+
label='Fail'
74+
hasFeedback
75+
validateStatus='error'
76+
help='Should be combination of numbers & alphabets'
77+
>
78+
<a-input placeholder='unavailable choice' id='error' />
79+
</a-form-item>
80+
81+
<a-form-item
82+
:labelCol="labelCol"
83+
:wrapperCol="wrapperCol"
84+
label='Success'
85+
hasFeedback
86+
validateStatus='success'
87+
>
88+
<a-date-picker style="width: 100%" />
89+
</a-form-item>
90+
91+
<a-form-item
92+
:labelCol="labelCol"
93+
:wrapperCol="wrapperCol"
94+
label='Warning'
95+
hasFeedback
96+
validateStatus='warning'
97+
>
98+
<a-time-picker style="width: 100%" />
99+
</a-form-item>
100+
101+
<a-form-item
102+
:labelCol="labelCol"
103+
:wrapperCol="wrapperCol"
104+
label='Error'
105+
hasFeedback
106+
validateStatus='error'
107+
>
108+
<a-select defaultValue='1'>
109+
<a-select-option value='1'>Option 1</a-select-option>
110+
<a-select-option value='2'>Option 2</a-select-option>
111+
<a-select-option value='3'>Option 3</a-select-option>
112+
</a-select>
113+
</a-form-item>
114+
115+
<a-form-item
116+
:labelCol="labelCol"
117+
:wrapperCol="wrapperCol"
118+
label='Validating'
119+
hasFeedback
120+
validateStatus='validating'
121+
help='The information is being validated...'
122+
>
123+
<a-cascader :defaultValue="['1']" :options="[]" />
124+
</a-form-item>
125+
126+
<a-form-item
127+
label='inline'
128+
:labelCol="labelCol"
129+
:wrapperCol="wrapperCol"
130+
>
131+
<a-col :span="11">
132+
<a-form-item validateStatus='error' help='Please select the correct date'>
133+
<a-date-picker style="width: 100%"/>
134+
</a-form-item>
135+
</a-col>
136+
<a-col :span="2">
137+
<span :style="{ display: 'inline-block', width: '100%', textAlign: 'center' }">
138+
-
139+
</span>
140+
</a-col>
141+
<a-col :span="11">
142+
<a-form-item>
143+
<a-date-picker style="width: 100%"/>
144+
</a-form-item>
145+
</a-col>
146+
</a-form-item>
147+
148+
<a-form-item
149+
:labelCol="labelCol"
150+
:wrapperCol="wrapperCol"
151+
label='Success'
152+
hasFeedback
153+
validateStatus='success'
154+
>
155+
<a-input-number style="width: 100%" />
156+
</a-form-item>
157+
</a-form>
158+
</template>
159+
<script>
160+
export default {
161+
data () {
162+
return {
163+
labelCol: {
164+
xs: { span: 24 },
165+
sm: { span: 5 },
166+
},
167+
wrapperCol: {
168+
xs: { span: 24 },
169+
sm: { span: 12 },
170+
},
171+
}
172+
},
173+
}
174+
</script>
175+
```
176+
177+
178+

‎components/form/demo/without-form-create.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<cn>
2+
#### 自行处理表单数据
3+
使用 `Form.create` 处理后的表单具有自动收集数据并校验的功能，但如果您不需要这个功能，或者默认的行为无法满足业务需求，可以选择不使用 `Form.create` 并自行处理数据。
4+
</cn>
5+
6+
<us>
7+
#### Handle Form Data Manually
8+
`Form.create` will collect and validate form data automatically. But if you don't need this feature or the default behaviour cannot satisfy your business, you can drop `Form.create` and handle form data manually.
9+
</us>
10+
11+
```html
12+
<template>
13+
<a-form>
14+
<a-form-item
15+
:labelCol="labelCol"
16+
:wrapperCol="wrapperCol"
17+
label="Prime between 8 & 12"
18+
:validateStatus="number.validateStatus"
19+
:help="number.errorMsg || tips"
20+
>
21+
<a-input-number
22+
:min="8"
23+
:max="12"
24+
:value="number.value"
25+
@change="handleNumberChange"
26+
/>
27+
</a-form-item>
28+
</a-form>
29+
</template>
30+
<script>
31+
function validatePrimeNumber (number) {
32+
if (number === 11) {
33+
return {
34+
validateStatus: 'success',
35+
errorMsg: null,
36+
}
37+
}
38+
return {
39+
validateStatus: 'error',
40+
errorMsg: 'The prime between 8 and 12 is 11!',
41+
}
42+
}
43+
export default {
44+
data () {
45+
return {
46+
labelCol: { span: 7 },
47+
wrapperCol: { span: 12 },
48+
number: {
49+
value: 11,
50+
},
51+
tips: 'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.',
52+
}
53+
},
54+
methods: {
55+
handleNumberChange (value) {
56+
this.number = {
57+
...validatePrimeNumber(value),
58+
value,
59+
}
60+
},
61+
},
62+
}
63+
</script>
64+
```
65+
66+
67+

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

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,3 @@
1-
---
2-
category: Components
3-
type: Data Entry
4-
cols: 1
5-
title: Form
6-
---
7-
8-
Form is used to collect, validate, and submit the user input, usually contains various form items including checkbox, radio, input, select, and etc.
9-
10-
## Form
11-
12-
You can align the controls of a `form` using the `layout` prop：
13-
14-
- `horizontal`：to horizontally align the `label`s and controls of the fields. (Default)
15-
- `vertical`：to vertically align the `label`s and controls of the fields.
16-
- `inline`：to render form fields in one line.
17-
18-
## Form fields
19-
20-
A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more.
21-
A form field is defined using `<Form.Item />`.
221

232
```jsx
243
<Form.Item {...props}>

0 commit comments

Comments
 (0)