diff --git a/components/form/FormItem.jsx b/components/form/FormItem.jsx index 98fc8b9205..c3c28167eb 100644 --- a/components/form/FormItem.jsx +++ b/components/form/FormItem.jsx @@ -98,7 +98,9 @@ class FormItem extends React.Component { isRequired() { if (this.context.form) { const meta = this.getMeta() || {}; - return (meta.validate || []).some((item) => { + const validate = (meta.validate || []); + + return validate.filter((item) => !!item.rules).some((item) => { return item.rules.some((rule) => rule.required); }); } @@ -125,6 +127,7 @@ class FormItem extends React.Component { if (typeof child.type === 'function' && !child.props.size) { return React.cloneElement(child, { size: 'large' }); } + return child; }); return [ diff --git a/components/form/demo/validate-basic.md b/components/form/demo/validate-basic.md index 16dc40e05f..23375e65d4 100644 --- a/components/form/demo/validate-basic.md +++ b/components/form/demo/validate-basic.md @@ -77,7 +77,7 @@ class BasicDemo extends React.Component { } render() { - const { getFieldProps } = this.props.form; + const { getFieldProps, getFieldError, isFieldValidating } = this.props.form; return (
@@ -85,14 +85,15 @@ class BasicDemo extends React.Component { label="用户名:" labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} - hasFeedback> + hasFeedback + help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}> + })} /> , mountNode); -```` \ No newline at end of file +```` diff --git a/components/form/demo/validate-customized.md b/components/form/demo/validate-customized.md index 9861c861ed..5fca5e6e64 100644 --- a/components/form/demo/validate-customized.md +++ b/components/form/demo/validate-customized.md @@ -9,7 +9,7 @@ --- ````jsx -import { Button, Form, Input, Row, Col } from 'antd'; +import { Button, Form, Input, Row, Col, Modal } from 'antd'; import classNames from 'classnames'; const createForm = Form.create; const FormItem = Form.Item; @@ -24,12 +24,12 @@ let Demo = React.createClass({ passBarShow: false, // 是否显示密码强度提示条 rePassBarShow: false, passStrength: 'L', // 密码强度 - rePassStrength: 'L' + rePassStrength: 'L', + visible: false, }; }, - handleSubmit(e) { - e.preventDefault(); + handleSubmit() { this.props.form.validateFields((errors, values) => { if (!!errors) { console.log('Errors in form!!!'); @@ -37,14 +37,10 @@ let Demo = React.createClass({ } console.log('Submit!!!'); console.log(values); + this.setState({ visible: false }); }); }, - handleReset(e) { - e.preventDefault(); - this.props.form.resetFields(); - }, - getPassStrenth(value, type) { if (value) { let strength; @@ -70,6 +66,14 @@ let Demo = React.createClass({ } }, + showModal() { + this.setState({ visible: true }); + }, + + hideModal() { + this.setState({ visible: false }); + }, + checkPass(rule, value, callback) { const form = this.props.form; this.getPassStrenth(value, 'pass'); @@ -123,66 +127,59 @@ let Demo = React.createClass({ render() { const { getFieldProps } = this.props.form; return ( - - - - - - - - - {this.state.passBarShow ? this.renderPassStrengthBar('pass') : null} - - +
+ + + + + + + + + + + {this.state.passBarShow ? this.renderPassStrengthBar('pass') : null} + + - - - - - - - - {this.state.rePassBarShow ? this.renderPassStrengthBar('rePass') : null} - - - - - - - -     - - - - - - + + + + + + + + {this.state.rePassBarShow ? this.renderPassStrengthBar('rePass') : null} + + + + +
); } }); diff --git a/components/form/index.md b/components/form/index.md index b66aed0e64..935b3faf06 100644 --- a/components/form/index.md +++ b/components/form/index.md @@ -105,7 +105,6 @@ CustomizedForm = Form.create({})(CustomizedForm); | hasFeedback | 配合 validateStatus 属性使用,是否展示校验状态图标 | bool | | false | | prefixCls | 样式类名,默认为 ant-form,通常您不需要设置 | string | | 'ant-form' | - ### Input | 参数 | 说明 | 类型 | 可选值 |默认值 |