feat: make Form validation work with Modal

This commit is contained in:
Benjy Cui 2016-01-29 10:32:52 +08:00
parent b67c2f7bc0
commit 4e13bee52a
4 changed files with 26 additions and 12 deletions

View File

@ -1,5 +1,6 @@
import React from 'react';
import classNames from 'classnames';
import objectAssign from 'object-assign';
function prefixClsFn(prefixCls, ...args) {
return args.map((s) => {
@ -32,10 +33,6 @@ class FormItem extends React.Component {
return this.props.children.props && this.props.children.props.id;
}
getMeta() {
return this.props.children.props && this.props.children.props.__meta;
}
renderHelp() {
const props = this.props;
const prefixCls = props.prefixCls;
@ -97,8 +94,13 @@ class FormItem extends React.Component {
isRequired() {
if (this.context.form) {
const meta = this.getMeta() || {};
return (meta.validate || []).some((item) => {
const meta = this.props.fieldOption || {};
// Have to merge manually, for children have no `__meta` now.
const validate = (meta.validate || []);
validate.push({ rules: meta.rules });
return validate.filter((item) => !!item.rules).some((item) => {
return item.rules.some((rule) => rule.required);
});
}
@ -120,12 +122,23 @@ class FormItem extends React.Component {
}
renderChildren() {
const context = this.context;
const props = this.props;
const children = React.Children.map(props.children, (child) => {
if (typeof child.type === 'function' && !child.props.size) {
return React.cloneElement(child, { size: 'large' });
}
// If <Component />&nbsp;&nbsp;&nbsp;<Component />,
// React will not convert &nbsp;&nbsp;&nbsp; into component.
if (!child.type) {
return child;
}
const childProps = {};
if (typeof child.type === 'function' && !child.props.size) {
objectAssign(childProps, { size: 'large' });
}
if (context.form && this.getId()) {
objectAssign(childProps, context.form.getFieldProps(this.getId(), props.fieldOption));
}
return React.cloneElement(child, childProps);
});
return [
this.renderLabel(),

View File

@ -138,7 +138,7 @@ let Demo = React.createClass({
]
})}
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
autoComplete="off"/>
autoComplete="off" id="pass" />
</FormItem>
</Col>
<Col span="6">
@ -163,7 +163,7 @@ let Demo = React.createClass({
}],
})}
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
autoComplete="off" />
autoComplete="off" id="rePass" />
</FormItem>
</Col>
<Col span="6">

View File

@ -105,6 +105,7 @@ CustomizedForm = Form.create({})(CustomizedForm);
| hasFeedback | 配合 validateStatus 属性使用,是否展示校验状态图标 | bool | | false |
| prefixCls | 样式类名,默认为 ant-form通常您不需要设置 | string | | 'ant-form' |
`Form.Item` 内的菜单控件必须设置 `id: String`,且必须唯一。
### Input