ant design 的 getFieldDecorator 校

今天在使用 ant design 的 getFieldDecorator 设置字段规则时遇到了一个问题。
如果设置了 initialValue，validation就失效了, 如果什么都不输入也不会有提示。
原来是之前的兄弟加参数的时候误操作，留了一个坑。这个方法只接收两个参数，多加的参数就无效了。
从语言的角度讲，这也是JavaScript这种解释型语言的弊端，参数不对也不报个错。搞得人家花了好多时间去找问题的原因。

/**
*错误的代码
*/
<Form.Item hasFeedback label="Description" htmlFor='desc'>
{
  getFieldDecorator('desc', 
  { initialValue: this.props.desc || undefined }, 
  { rules: [{ required: true, message: 'description is required!' }],
  })
(<Input.TextArea placeholder='enter description' />)
}
</Form.Item>

image.png

/**
*正确的代码
*/
<Form.Item hasFeedback label="Description" htmlFor='desc'>
{
  getFieldDecorator('desc', 
  { 
    initialValue: this.props.desc || undefined, 
    rules: [{ required: true, message: 'description is required!' }],
  })
(<Input.TextArea placeholder='enter description' />)
}
</Form.Item>

image.png

Form.createFormField#

用于标记 mapPropsToFields 返回的表单域数据，例子。

this.props.form.getFieldDecorator(id, options)#

经过 getFieldDecorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：

https://ant.design/components/form-cn/