使用Antd中的Form表单验证

为了防止继续摸鱼，只好写点东西吧，又不知写什么好，打开代码，第一个映入眼帘的就是如下代码:

this.props.form.getFieldDecorator("root",{initialValue:tranlist})

好吧，那就写有关Form表单验证问题。

getFieldDecorator

antd中有个Form表单，可以收集Form.Item中的元素，那么如何验证输入框或选择框或...符合要求呢？例如：

这就用到getFieldDecorator方法，此方法，可以用来接收两个参数，其中第一个参数"root"为表单的字段对象，相当于id的作用，是用户自定义的，用于识别控件的变量名；第二个参数是验证规则，返回的是一个方法，具体包括初始值、规则等，其他不是特别常用（个人觉得）。
可以参考antd官方文档中form表单的API，传送门如下：
https://ant.design/components/form-cn/#components-form-demo-validate-other
具体写法如下：

const { getFieldDecorator } = this.props.Form;

<FormItem {...formItemLayout} label={用例名称} hasFeedback>
    {getFieldDecorator('mlname', {
        rules: [{ 
        required: true, 
        message: “用例名称不能为空”, 
        whitespace: true 
        }],
    })(
        <Input type="text" placeholder=“请填写用例名称” />
    )}
</FormItem>

敲黑板！敲黑板！敲黑板！
如果还是报了getFieldDecorator未定义这个错误，那你就慢慢查怎么修改吧。哈哈哈哈哈哈，开个玩笑，如果这样：

TypeError: Cannot read property 'getFieldDecorator' of undefined

那就说明你还没有在export暴露接口处添加：

export default Form.create()(FormLogin)

这是因为，我们使用过Form.create()这个方法创建了有getFieldDecorator这个功能的表单，这个问题，层一度困扰我好久，就是因为看官方文档不仔细。都给我逼到想看Form表单相关源码的冲动。还好在网上查到了解决方案。老天保佑。

getFieldValue和setFieldValue

这其实还是很简单的，没什么需要注意的，就是前者是得到表单值，后者，将表单中的值进行赋值。具体：
getFieldsValue：获取一组输入控件的值，如不传入参数，则获取全部组件的值；
getFieldValue：获取一个输入控件的值；
setFieldsValue：设置一组输入控件的值；
写法：

const roots = getFieldValue("roots");

form.setFieldsValue({ roots: nextVal });

这里需要注意的是：getFieldValue不能获取没有使用getFieldDecorator绑定的控件。