deps: upgrade rc-form, close: #4374

components/form/demo/global-state.md

@@ -29,6 +29,9 @@ const CustomizedForm = Form.create({
       },
     };
   },
+  onValuesChange(_, values) {
+    console.log(values);
+  },
 })((props) => {
   const { getFieldDecorator } = props.form;
   return (

components/form/demo/horizontal-login.md

@@ -17,7 +17,15 @@ Horizontal login form is often used in navigation bar.
 import { Form, Icon, Input, Button } from 'antd';
 const FormItem = Form.Item;
 
+function hasErrors(fieldsError) {
+  return Object.keys(fieldsError).some(field => fieldsError[field]);
+}
+
 const HorizontalLoginForm = Form.create()(React.createClass({
+  componentDidMount() {
+    // To disabled submit button at the beginning.
+    this.props.form.validateFields();
+  },
   handleSubmit(e) {
     e.preventDefault();
     this.props.form.validateFields((err, values) => {
@@ -27,17 +35,27 @@ const HorizontalLoginForm = Form.create()(React.createClass({
     });
   },
   render() {
-    const { getFieldDecorator } = this.props.form;
+    const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
+
+    // Only show error after a field is touched.
+    const userNameError = isFieldTouched('userName') && getFieldError('userName');
+    const passwordError = isFieldTouched('password') && getFieldError('password');
     return (
       <Form inline onSubmit={this.handleSubmit}>
-        <FormItem>
+        <FormItem
+          validateStatus={userNameError ? 'error' : ''}
+          help={userNameError || ''}
+        >
           {getFieldDecorator('userName', {
             rules: [{ required: true, message: 'Please input your username!' }],
           })(
             <Input addonBefore={<Icon type="user" />} placeholder="Username" />
           )}
         </FormItem>
-        <FormItem>
+        <FormItem
+          validateStatus={passwordError ? 'error' : ''}
+          help={passwordError || ''}
+        >
           {getFieldDecorator('password', {
             rules: [{ required: true, message: 'Please input your Password!' }],
           })(
@@ -45,7 +63,13 @@ const HorizontalLoginForm = Form.create()(React.createClass({
           )}
         </FormItem>
         <FormItem>
-          <Button type="primary" htmlType="submit">Log in</Button>
+          <Button
+            type="primary"
+            htmlType="submit"
+            disabled={hasErrors(getFieldsError())}
+          >
+            Log in
+          </Button>
         </FormItem>
       </Form>
     );

components/form/index.en-US.md

@@ -57,6 +57,7 @@ The following `options` are available:
 |-----------|------------------------------------------|------------|
 | onFieldsChange | Specify a function that will be called when the value a `Form.Item` gets changed. Usage example: saving the field's value to Redux store. | Function(props, fields) |
 | mapPropsToFields | Convert props to corresponding field value. Usage example: reading the values from Redux store. | Function(props): Object{ fieldName: Object{ value } } |
+| onValuesChange | A handler while value of any field is changed | (props, values) => void |
 
 If the form has been decorated by `Form.create` then it has `this.props.form` property. `this.props.form` provides some APIs as follows:
 
@@ -70,7 +71,10 @@ If the form has been decorated by `Form.create` then it has `this.props.form` pr
 | validateFields | Validate the specified fields and get theirs values and errors. | Function([fieldNames: string[]], [options: object], callback: Function(errors, values)) |
 | validateFieldsAndScroll | This function is similar to `validateFields`, but after validation, if the target field is not in visible area of form, form will be automatically scrolled to the target field area. | same as `validateFields` |
 | getFieldError | Get the error of a field. | Function(name) |
+| getFieldsError | Get the specified fields' error. If you don't specify a parameter, you will get all fields' error. | Function([names: string[]]) |
 | isFieldValidating | Check if the specified field is being validated. | Function(name) |
+| isFieldTouched | Check whether a field is touched by `getFieldDecorator`'s `options.trigger` event | (name: string) => boolean |
+| isFieldsTouched | Check whether any of fields is touched by `getFieldDecorator`'s `options.trigger` event | (names?: string[]) => boolean |
 | resetFields | Reset the specified fields' value(to `initialValue`) and status. If you don't specify a parameter, all the fields will be reset. | Function([names: string[]]) |
 | getFieldDecorator | Two-way binding for form, please read below for details. | |
 

components/form/index.zh-CN.md

@@ -59,6 +59,7 @@ CustomizedForm = Form.create({})(CustomizedForm);
 |-----------|------------------------------------------|------------|
 | onFieldsChange | 当 `Form.Item` 子节点的值发生改变时触发，可以把对应的值转存到 Redux store | Function(props, fields) |
 | mapPropsToFields | 把 props 转为对应的值，可用于把 Redux store 中的值读出 | Function(props): Object{ fieldName: Object{ value } } |
+| onValuesChange | 任一表单域的值发生改变时的回调 | (props, values) => void |
 
 经过 `Form.create` 包装的组件将会自带 `this.props.form` 属性，`this.props.form` 提供的 API 如下：
 
@@ -71,7 +72,10 @@ CustomizedForm = Form.create({})(CustomizedForm);
 | validateFields | 校验并获取一组输入域的值与 Error | Function([fieldNames: string[]], [options: object], callback: Function(errors, values)) |
 | validateFieldsAndScroll | 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 | 参考 `validateFields` |
 | getFieldError | 获取某个输入控件的 Error | Function(name) |
+| getFieldsError | 获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 Error | Function([names: string[]]) |
 | isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) |
+| isFieldTouched | 判断一个输入控件是否经历过 `getFieldDecorator` 的值收集时机 `options.trigger` | (name: string) => boolean |
+| isFieldsTouched | 判断是否任一输入控件经历过 `getFieldDecorator` 的值收集时机 `options.trigger` | (names?: string[]) => boolean |
 | resetFields | 重置一组输入控件的值（为 `initialValue`）与状态，如不传入参数，则重置所有组件 | Function([names: string[]]) |
 | getFieldDecorator | 用于和表单进行双向绑定，详见下方描述 | |
 

package.json

@@ -48,7 +48,7 @@
     "rc-dialog": "~6.5.0",
     "rc-dropdown": "~1.4.8",
     "rc-editor-mention": "~0.3.0",
-    "rc-form": "~1.1.0",
+    "rc-form": "~1.3.0",
     "rc-input-number": "~2.8.3",
     "rc-menu": "~5.0.1",
     "rc-notification": "~1.3.4",