Skip to content

Commit e5a8952

Browse files
tangjinzhoutangjinzhou
committed
feat: update form
1 parent 894f954 commit e5a8952

File tree

5 files changed

+67
-44
lines changed

5 files changed

+67
-44
lines changed

‎components/form/demo/index.vue

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@ const md = {
3939
cn: `# Form 表单
4040
具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
4141
42+
## 何时使用
43+
44+
- 用于创建一个实体或收集信息。
45+
- 需要对输入的数据类型进行校验时。
46+
4247
## 表单
4348
4449
我们为 \`form\` 提供了以下三种排列方式：
@@ -65,18 +70,22 @@ const md = {
6570
us: `# Form
6671
Form is used to collect, validate, and submit the user input, usually contains various form items including checkbox, radio, input, select, and etc.
6772
68-
## Form
73+
## When to use
74+
75+
- When you need to create a instance or collect information.
76+
- When you need to validate fields in certain rules.
77+
78+
## Form Component
6979
7080
You can align the controls of a \`form\` using the \`layout\` prop：
7181
7282
- \`horizontal\`：to horizontally align the \`label\`s and controls of the fields. (Default)
7383
- \`vertical\`：to vertically align the \`label\`s and controls of the fields.
7484
- \`inline\`：to render form fields in one line.
7585
76-
## Form fields
86+
## Form Item Component
7787
78-
A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more.
79-
A form field is defined using \`<Form.Item />\`.
88+
A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more. A form field is defined using \`<Form.Item />\`.
8089
8190
## Note:
8291
1. If you use \`Form.create\` to process the form to have the ability to automatically collect data and verify it, it is recommended to use \`jsx\`.

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

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,17 @@
22

33
### Form
44

5-
| Property | Description | Type | Default Value |
6-
| --- | --- | --- | --- |
7-
| form | Decorated by `Form.create()` will be automatically set `this.form` property, so just pass to form. If you use the template syntax, you can use `this.$form.createForm(this, options)` | object | n/a |
8-
| hideRequiredMark | Hide required mark of all form items | Boolean | false |
9-
| layout | Define form layout | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
10-
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](/components/grid/#Col) | |
11-
| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) | |
12-
| autoFormCreate(deprecated) | Automate Form.create, Recommended for use under the `template` component, and cannot be used with `Form.create()`. You should use `$form.createForm` to instead it after 1.1.9. | Function(form) | |
13-
| options(deprecated) | The `options` corresponding to `Form.create(options)`. You should use `$form.createForm` to instead it after 1.1.9. | Object | {} |
5+
| Property | Description | Type | Default Value | Version |
6+
| --- | --- | --- | --- | --- |
7+
| form | Decorated by `Form.create()` will be automatically set `this.form` property, so just pass to form. If you use the template syntax, you can use `this.$form.createForm(this, options)` | object | n/a | |
8+
| hideRequiredMark | Hide required mark of all form items | Boolean | false | |
9+
| layout | Define form layout | 'horizontal'\|'vertical'\|'inline' | 'horizontal' | |
10+
| labelAlign | text align of label of all items | 'left' \| 'right' | 'right' | 1.5.0 |
11+
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](/components/grid/#Col) | | |
12+
| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) | | |
13+
| autoFormCreate(deprecated) | Automate Form.create, Recommended for use under the `template` component, and cannot be used with `Form.create()`. You should use `$form.createForm` to instead it after 1.1.9. | Function(form) | | |
14+
| options(deprecated) | The `options` corresponding to `Form.create(options)`. You should use `$form.createForm` to instead it after 1.1.9. | Object | {} | 1.1.9 |
15+
| colon | change default props colon value of Form.Item (only effective when prop layout is horizontal) | boolean | true | 1.5.0 |
1416

1517
### Events
1618

@@ -173,17 +175,19 @@ After wrapped by `getFieldDecorator` or `v-decorator`, `value`(or other property
173175

174176
Note: If Form.Item has multiple children that had been decorated by `getFieldDecorator` or `v-decorator`, `help` and `required` and `validateStatus` can't be generated automatically.
175177

176-
| Property | Description | Type | Default Value |
177-
| --- | --- | --- | --- |
178-
| colon | Used with `label`, whether to display `:` after label text. | boolean | true |
179-
| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | string\|slot | |
180-
| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false |
181-
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|slot | |
182-
| label | Label text | string\|slot | |
183-
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](/components/grid/#Col) | |
184-
| required | Whether provided or not, it will be generated by the validation rule. | boolean | false |
185-
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | |
186-
| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) | |
178+
| Property | Description | Type | Default Value | Version |
179+
| --- | --- | --- | --- | --- |
180+
| colon | Used with `label`, whether to display `:` after label text. | boolean | true | |
181+
| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | string\|slot | | |
182+
| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false | |
183+
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|slot | | |
184+
| htmlFor | Set sub label `htmlFor`. | string | | 1.5.0 |
185+
| label | Label text | string\|slot | | |
186+
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](/components/grid/#Col) | | |
187+
| labelAlign | text align of label | 'left' \| 'right' | 'right' | 1.5.0 |
188+
| required | Whether provided or not, it will be generated by the validation rule. | boolean | false | |
189+
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | | |
190+
| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) | | |
187191

188192
### Validation Rules
189193

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

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@
22

33
### Form
44

5-
| 参数 | 说明 | 类型 | 默认值 |
6-
| --- | --- | --- | --- |
7-
| form | 经 `Form.create()` 包装过的组件会自带 `this.form` 属性，如果使用 template 语法，可以使用 this.\$form.createForm(this, options) | object | 无 |
8-
| hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false |
9-
| layout | 表单布局 | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
10-
| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid-cn/#Col) | |
11-
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid-cn/#Col) | |
12-
| selfUpdate | 自定义字段更新逻辑，说明[见下](/components/form-cn/#selfUpdate)，需 1.3.17 版本以上 | boolean | false |
5+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
6+
| --- | --- | --- | --- | --- |
7+
| form | 经 `Form.create()` 包装过的组件会自带 `this.form` 属性，如果使用 template 语法，可以使用 this.\$form.createForm(this, options) | object | 无 | |
8+
| hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false | |
9+
| labelAlign | label 标签的文本对齐方式 | 'left' \| 'right' | 'right' | 1.5.0 |
10+
| layout | 表单布局 | 'horizontal'\|'vertical'\|'inline' | 'horizontal' | |
11+
| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid-cn/#Col) | | |
12+
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid-cn/#Col) | | |
13+
| selfUpdate | 自定义字段更新逻辑，说明[见下](/components/form-cn/#selfUpdate)，需 1.3.17 版本以上 | boolean | false | 1.3.17 |
14+
| colon | 配置 Form.Item 的 colon 的默认值 (只有在属性 layout 为 horizontal 时有效) | boolean | true | 1.5.0 |
1315

1416
### 事件
1517

@@ -171,18 +173,20 @@ validateFields(['field1', 'field2'], options, (errors, values) => {
171173

172174
注意：一个 Form.Item 建议只放一个被 getFieldDecorator 或 v-decorator 装饰过的 child，当有多个被装饰过的 child 时，`help` `required` `validateStatus` 无法自动生成。
173175

174-
| 参数 | 说明 | 类型 | 默认值 |
175-
| --- | --- | --- | --- |
176-
| colon | 配合 label 属性使用，表示是否显示 label 后面的冒号 | boolean | true |
177-
| extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string\|slot | |
178-
| hasFeedback | 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false |
179-
| help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|slot | |
180-
| label | label 标签的文本 | string\|slot | |
181-
| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid-cn/#Col) | |
182-
| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false |
183-
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | |
184-
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid-cn/#Col) | |
185-
| selfUpdate | 自定义字段更新逻辑，你可以通过 Form 的 selfUpdate 进行统一设置。当和 Form 同时设置时，以 Item 为准。 说明[见下](/components/form-cn/#selfUpdate) 需 1.3.17 版本以上 | boolean | false |
176+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
177+
| --- | --- | --- | --- | --- |
178+
| colon | 配合 label 属性使用，表示是否显示 label 后面的冒号 | boolean | true | |
179+
| extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string\|slot | | |
180+
| hasFeedback | 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false | |
181+
| help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|slot | | |
182+
| htmlFor | 设置子元素 label `htmlFor` 属性 | string | | 1.5.0 |
183+
| label | label 标签的文本 | string\|slot | | |
184+
| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid-cn/#Col) | | |
185+
| labelAlign | 标签文本对齐方式 | 'left' \| 'right' | 'right' | 1.5.0 |
186+
| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false | |
187+
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | | |
188+
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid-cn/#Col) | | |
189+
| selfUpdate | 自定义字段更新逻辑，你可以通过 Form 的 selfUpdate 进行统一设置。当和 Form 同时设置时，以 Item 为准。 说明[见下](/components/form-cn/#selfUpdate) 需 1.3.17 版本以上 | boolean | false | 1.3.17 |
186190

187191
### 校验规则
188192

‎types/form/form-item.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,4 +62,7 @@ export declare class FormItem extends AntdComponent {
6262
* @type Col
6363
*/
6464
wrapperCol: Col;
65+
colon: boolean;
66+
labelAlign: 'left' | 'right';
67+
selfUpdate: boolean;
6568
}

‎types/form/form.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -390,6 +390,9 @@ export declare class Form extends AntdComponent {
390390
* @param field
391391
*/
392392
createFormField(field: any): any;
393+
colon: boolean;
394+
labelAlign: 'left' | 'right';
395+
selfUpdate: boolean;
393396
}
394397

395398
declare module 'vue/types/vue' {

0 commit comments

Comments
 (0)