antd Select加labelInValue rules设置required: true失效

1,478 阅读1分钟

注:antd@4.11.2
代码如下:

<Form.Item
    label={'test'}
    style={{ display: 'inline-block', width: '50%' }}
    labelCol={{ sm: { span: 8 } }}
    wrapperCol={{ sm: { span: 12 } }}
    name={'test'}
    rules={[{required: true, message: 'test'}]}
>
    <Select
        labelInValue
        placeholder={'test'}
        optionFilterProp="children"
        showSearch
    >
        
    </Select>
</Form.Item>

因为加了labelInValue,之后发现rules设置required: true后,Select没有选择任何选项时, form在校验的时候根本没用

解决方案如下:自定义一个validator

<Form.Item
    label={'test'}
    style={{ display: 'inline-block', width: '50%' }}
    labelCol={{ sm: { span: 8 } }}
    wrapperCol={{ sm: { span: 12 } }}
    name={'test'}
    rules={[{
        validator: (rule, value, fn) => {
            if (rule.field === 'test') {
                if (!value.value) {
                    fn('请输入test')
                } else {
                    return Promise.resolve()
                }
            }
        }
    }]}
>
    <Select
        labelInValue
        placeholder={'test'}
        optionFilterProp="children"
        showSearch
    >
        
    </Select>
</Form.Item>

还要注意:因为加了labelInValue,所以initialValue必须是对象的形式{value: }