From 5836adbb50b39f89868746dc90b7f546f4f8cb85 Mon Sep 17 00:00:00 2001 From: tjz <415800467@qq.com> Date: Sun, 24 Jun 2018 21:18:45 +0800 Subject: [PATCH] feat: update form --- components/form/Form.jsx | 7 +- components/form/FormItem.jsx | 20 +--- .../__tests__/__snapshots__/demo.test.js.snap | 10 +- components/form/demo/advanced-search.vue | 1 + components/form/demo/dynamic-rule.vue | 16 ++- components/form/demo/horizontal-login.vue | 107 ++++++++++-------- components/form/demo/index.vue | 37 +++--- components/form/demo/test.vue | 80 ------------- components/form/index.en-US.md | 21 ++++ components/form/index.zh-CN.md | 21 ++++ components/vc-form/src/createBaseForm.jsx | 2 +- site/dev.js | 2 +- 12 files changed, 148 insertions(+), 176 deletions(-) delete mode 100644 components/form/demo/test.vue diff --git a/components/form/Form.jsx b/components/form/Form.jsx index c118eec42..b29b0c743 100755 --- a/components/form/Form.jsx +++ b/components/form/Form.jsx @@ -173,9 +173,6 @@ export default { [`${prefixCls}-hide-required-mark`]: hideRequiredMark, }) if (autoFormCreate) { - const saveFormRef = (ref) => { - this.domForm = ref - } const DomForm = this.DomForm || createDOMForm({ fieldNameProp: 'id', ...options, @@ -195,7 +192,7 @@ export default { submit: onSubmit, } }, - mounted () { + created () { autoFormCreate(this.form) }, render () { @@ -210,7 +207,7 @@ export default { } this.DomForm = DomForm - return saveFormRef(inst)}/> + return { this.domForm = inst }}/> } return
{$slots.default}
diff --git a/components/form/FormItem.jsx b/components/form/FormItem.jsx index aaa5157cd..552ac2fd2 100644 --- a/components/form/FormItem.jsx +++ b/components/form/FormItem.jsx @@ -5,7 +5,7 @@ import Row from '../grid/Row' import Col, { ColProps } from '../grid/Col' import warning from '../_util/warning' import { FIELD_META_PROP, FIELD_DATA_PROP } from './constants' -import { initDefaultProps, getComponentFromProp, filterEmpty, getSlotOptions, getSlots, isEmptyElement } from '../_util/props-util' +import { initDefaultProps, getComponentFromProp, filterEmpty, getSlotOptions, getSlots } from '../_util/props-util' import getTransitionProps from '../_util/getTransitionProps' import BaseMixin from '../_util/BaseMixin' export const FormItemProps = { @@ -47,10 +47,6 @@ export default { 'while there are more than one `getFieldDecorator` in it.', ) }, - - // shouldComponentUpdate(...args: any[]) { - // return PureRenderMixin.shouldComponentUpdate.apply(this, args); - // } methods: { getHelpMsg () { const help = getComponentFromProp(this, 'help') @@ -306,15 +302,6 @@ export default { ) : null }, renderChildren () { - // const { $slots, FormProps, decoratorFormProps, prop } = this - // const child = filterEmpty($slots.default || []) - // if (decoratorFormProps.form && prop && child.length) { - // const getFieldDecorator = decoratorFormProps.form.getFieldDecorator - // const rules = FormProps.rules[prop] || [] - // child[0] = getFieldDecorator(prop, { - // rules, - // })(child[0]) - // } return [ this.renderLabel(), this.renderWrapper( @@ -349,7 +336,12 @@ export default { if (decoratorFormProps.form && fieldDecoratorId && child.length) { const getFieldDecorator = decoratorFormProps.form.getFieldDecorator child[0] = getFieldDecorator(fieldDecoratorId, fieldDecoratorOptions)(child[0]) + warning( + !(child.length > 1), + '`autoFormCreate` just `decorator` then first children. but you can use JSX to support multiple children', + ) } + this.slotDefault = child const children = this.renderChildren() return this.renderFormItem(children) diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap index 136d0a5a0..8b9116297 100644 --- a/components/form/__tests__/__snapshots__/demo.test.js.snap +++ b/components/form/__tests__/__snapshots__/demo.test.js.snap @@ -221,7 +221,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.vue correctly 1`] = ` `; exports[`renders ./components/form/demo/dynamic-rule.vue correctly 1`] = ` -
+
@@ -244,7 +244,9 @@ exports[`renders ./components/form/demo/dynamic-rule.vue correctly 1`] = `
-
+
@@ -258,7 +260,7 @@ exports[`renders ./components/form/demo/dynamic-rule.vue correctly 1`] = `
-
+
`; exports[`renders ./components/form/demo/form-in-modal.vue correctly 1`] = ` @@ -314,7 +316,7 @@ exports[`renders ./components/form/demo/horizontal-login.vue correctly 1`] = `
-
+
diff --git a/components/form/demo/advanced-search.vue b/components/form/demo/advanced-search.vue index 832a7c917..1db20195b 100644 --- a/components/form/demo/advanced-search.vue +++ b/components/form/demo/advanced-search.vue @@ -13,6 +13,7 @@ Because the width of label is not fixed, you may need to adjust it by customizin + diff --git a/components/form/demo/index.vue b/components/form/demo/index.vue index e12c06e7b..168aefc0e 100644 --- a/components/form/demo/index.vue +++ b/components/form/demo/index.vue @@ -85,33 +85,40 @@ export default { return (
- - - + + + + + + + + + + + + + + + + + + + - - - - - - - - - @@ -121,12 +128,6 @@ export default { - - - - - - diff --git a/components/form/demo/test.vue b/components/form/demo/test.vue deleted file mode 100644 index 24aabaea1..000000000 --- a/components/form/demo/test.vue +++ /dev/null @@ -1,80 +0,0 @@ - - - diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index 29cc1e9f8..f220e4912 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -14,12 +14,31 @@ | form | Decorated by `Form.create()` will be automatically set `this.form` property, so just pass to form, you don't need to set it by yourself after 1.7.0. | object | n/a | | hideRequiredMark | Hide required mark of all form items | Boolean | false | | layout | Define form layout(Support after 2.8) | 'horizontal'\|'vertical'\|'inline' | 'horizontal' | +| autoFormCreate | Automate Form.create, Recommended for use under the `template` component, and cannot be used with `Form.create()` |Function(form)| | +| options | The `options` corresponding to `Form.create(options)` | Object | {} | ### Events | Events Name | Description | Arguments | | --- | --- | --- | | submit | Defines a function will be called if form data validation is successful. | Function(e:Event) | +### autoFormCreate + +````html + +... + +```` +If you use the `template` syntax, you can use ʻautoFormCreate` to turn on automatic validation and data collection, but each `Form.Item` only to `decorator` for its first child. More complex features suggest `JSX`. + +Related examples are as follows: + +[coordinated-controls](/ant-design/components/form/#components-form-demo-coordinated-controls) + +[dynamic-rules](/ant-design/components/form/#components-form-demo-dynamic-rules) + +[horizontal-login-form](/ant-design/components/form/#components-form-demo-horizontal-login-form) + ### Form.create(options) How to use： @@ -124,6 +143,8 @@ Note: | required | Whether provided or not, it will be generated by the validation rule. | boolean | false | | validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | | | wrapperCol | The layout for input controls, same as `labelCol` | [object](/ant-design/components/grid/#Col) | | +| fieldDecoratorId | Corresponds to the first parameter `id` of `getFieldDecorator(id, options)`. If you need to collect data, you need to set this field. | string | | +| fieldDecoratorOptions | Corresponds to the second parameter `options` of `getFieldDecorator(id, options)`. | object | {} | ### Validation Rules diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 0f3e424c3..9b05e17b8 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -14,12 +14,31 @@ | form | 经 `Form.create()` 包装过的组件会自带 `this.form` 属性，直接传给 Form 即可。无需手动设置 | object | 无 | | hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false | | layout | 表单布局 | 'horizontal'\|'vertical'\|'inline' | 'horizontal' | +| autoFormCreate | 自动执行Form.create，建议在template组件下使用，并且不可以和`Form.create()`同时使用 |Function(form)| 无| +| options | 对应Form.create(options)的`options` | Object | {} | ### 事件 | 事件名称 | 说明 | 回调参数 | | --- | --- | --- | | submit | 数据验证成功后回调事件 | Function(e:Event) | +### autoFormCreate + +````html + +... + +```` +如果使用`template`语法，可以使用`autoFormCreate`开启自动校验和数据收集功能，但每一个`Form.Item`仅仅对其第一个子组件进行`decorator`。更加复杂的功能建议使用`JSX`。 + +相关示例如下： + +[coordinated-controls](/ant-design/components/form-cn/#components-form-demo-coordinated-controls) + +[dynamic-rules](/ant-design/components/form-cn/#components-form-demo-dynamic-rules) + +[horizontal-login-form](/ant-design/components/form-cn/#components-form-demo-horizontal-login-form) + ### Form.create(options) 使用方式如下： @@ -123,6 +142,8 @@ CustomizedForm = Form.create({})(CustomizedForm); | required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false | | validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | | | wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/ant-design/components/grid-cn/#Col) | | +| fieldDecoratorId | 对应`getFieldDecorator(id, options)`的第一个参数`id`，如需收集数据需要设置该字段 | string | 无 | +| fieldDecoratorOptions | 对应`getFieldDecorator(id, options)`的第二个参数`options` | object | {} | ### 校验规则 diff --git a/components/vc-form/src/createBaseForm.jsx b/components/vc-form/src/createBaseForm.jsx index f128fe88c..79dcf5c05 100644 --- a/components/vc-form/src/createBaseForm.jsx +++ b/components/vc-form/src/createBaseForm.jsx @@ -178,7 +178,7 @@ function createBaseForm (option = {}, mixins = []) { warning( !(valuePropName in originalProps), `\`getFieldDecorator\` will override \`${valuePropName}\`, ` + - `so please don't set \`${valuePropName}\` directly ` + + `so please don't set \`${valuePropName} and v-model\` directly ` + `and use \`setFieldsValue\` to set it.` ) const defaultValuePropName = diff --git a/site/dev.js b/site/dev.js index a1d27fefd..3a52133ed 100644 --- a/site/dev.js +++ b/site/dev.js @@ -10,7 +10,7 @@ import Api from './components/api' import './components' import demoBox from './components/demoBox' import demoContainer from './components/demoContainer' -import Test from '../components/form/demo/test' +import Test from '../components/form/demo/index' Vue.use(VueClipboard) Vue.use(VueRouter)