注: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: }