Merge pull request #957 from ant-design/feat-form

feat: make Form validation work with Modal

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 [

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 (
       <Form horizontal form={this.props.form}>
@@ -85,14 +85,15 @@ class BasicDemo extends React.Component {
           label="用户名："
           labelCol={{ span: 7 }}
           wrapperCol={{ span: 12 }}
-          hasFeedback>
+          hasFeedback
+          help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}>
           <Input placeholder="实时校验，输入 JasonWood 看看"
             {...getFieldProps('name', {
               rules: [
                 { required: true, min: 5, message: '用户名至少为 5 个字符' },
                 { validator: this.userExists },
               ],
-            })}/>
+            })} />
         </FormItem>
 
         <FormItem
@@ -174,4 +175,4 @@ class BasicDemo extends React.Component {
 BasicDemo = createForm()(BasicDemo);
 
 ReactDOM.render(<BasicDemo />, mountNode);
-````
+````

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) {
+  handleSubmit() {
-    e.preventDefault();
     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 (
-      <Form horizontal form={this.props.form}>
+      <div>
-        <Row>
+        <Button type="primary" onClick={this.showModal}>修改密码</Button>
-          <Col span="18">
+        <Modal title="修改密码" visible={this.state.visible} onOk={this.handleSubmit} onCancel={this.hideModal}>
-            <FormItem
+          <Form horizontal form={this.props.form}>
-              label="密码："
+            <Row>
-              labelCol={{ span: 6 }}
+              <Col span="18">
-              wrapperCol={{ span: 18 }}>
+                <FormItem
-              <Input type="password"
+                  label="密码："
-                {...getFieldProps('pass', {
+                  labelCol={{ span: 6 }}
-                  rules: [
+                  wrapperCol={{ span: 18 }}>
-                    { required: true, whitespace: true, message: '请填写密码' },
+                  <Input type="password"
-                    { validator: this.checkPass }
+                    {...getFieldProps('pass', {
-                  ]
+                      rules: [
-                })}
+                        { required: true, whitespace: true, message: '请填写密码' },
-                onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
+                        { validator: this.checkPass }
-                autoComplete="off"/>
+                      ]
-            </FormItem>
+                    })}
-          </Col>
+                    onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
-          <Col span="6">
+                    autoComplete="off" id="pass" />
-            {this.state.passBarShow ? this.renderPassStrengthBar('pass') : null}
+                </FormItem>
-          </Col>
+              </Col>
-        </Row>
+              <Col span="6">
+                {this.state.passBarShow ? this.renderPassStrengthBar('pass') : null}
+              </Col>
+            </Row>
 
-        <Row>
+            <Row>
-          <Col span="18">
+              <Col span="18">
-            <FormItem
+                <FormItem
-              label="确认密码："
+                  label="确认密码："
-              labelCol={{ span: 6 }}
+                  labelCol={{ span: 6 }}
-              wrapperCol={{ span: 18 }}>
+                  wrapperCol={{ span: 18 }}>
-              <Input type="password"
+                  <Input type="password"
-                {...getFieldProps('rePass', {
+                    {...getFieldProps('rePass', {
-                  rules: [{
+                      rules: [{
-                    required: true,
+                        required: true,
-                    whitespace: true,
+                        whitespace: true,
-                    message: '请再次输入密码',
+                        message: '请再次输入密码',
-                  }, {
+                      }, {
-                    validator: this.checkPass2,
+                        validator: this.checkPass2,
-                  }],
+                      }],
-                })}
+                    })}
-                onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
+                    onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
-                autoComplete="off" />
+                    autoComplete="off" id="rePass" />
-            </FormItem>
+                </FormItem>
-          </Col>
+              </Col>
-          <Col span="6">
+              <Col span="6">
-            {this.state.rePassBarShow ? this.renderPassStrengthBar('rePass') : null}
+                {this.state.rePassBarShow ? this.renderPassStrengthBar('rePass') : null}
-          </Col>
+              </Col>
-        </Row>
+            </Row>
-
+          </Form>
-        <Row>
+        </Modal>
-          <Col span="18">
+      </div>
-            <FormItem
-              wrapperCol={{ span: 12, offset: 6 }}>
-              <Button type="primary" onClick={this.handleSubmit}>确定</Button>
-              &nbsp;&nbsp;&nbsp;
-              <Button type="ghost" onClick={this.handleReset}>重置</Button>
-            </FormItem>
-          </Col>
-          <Col span="6" />
-        </Row>
-      </Form>
     );
   }
 });

components/form/index.md

@@ -105,7 +105,6 @@ CustomizedForm = Form.create({})(CustomizedForm);
 |  hasFeedback | 配合 validateStatus 属性使用，是否展示校验状态图标 | bool |  | false  |
 |  prefixCls | 样式类名，默认为 ant-form，通常您不需要设置 | string |  |  'ant-form' |
 
-
 ### Input
 
 | 参数      | 说明                                     | 类型       |  可选值 |默认值 |