如果某个逻辑不通过，我可以在提交时在Antd输入字段下应用自定义错误消息吗?

Question

如果某些条件不满足，我试图在表单提交上的Antd输入下呈现错误消息。在我的特定情况下，如果!this.isNew && this.state.hasTypedLocation && !this.state.hasChosenLocation。现在我只是在控制台记录一个错误。andd是否提供类似的功能?

我有以下输入:

<Form.Item
name="searchBox"
rules={[
{
required: true,
message: <IntlMessages id="common.error_address" />,
},
]}
>
<Input
type="text"
placeholder={intl.formatMessage({ id: 'common.error_address' })}
onChange={onChangeHandlerAddress}
value={facilityData.address1}
/>
</Form.Item>

我有下面的函数保存我的实体:

saveFacility(event) {
event.persist();
event.preventDefault();
this.formRef.current
.validateFields(['name', 'organization', 'customer', 'searchBox'])
.then((values) => {
const { actions } = this.props;
const { facility } = this.state;
if (!this.isNew && this.state.hasTypedLocation && !this.state.hasChosenLocation ) {
console.log('error')
} else {
actions.saveFacility(facility);
}
})
.catch((error) => {
console.log(error);
});
}

Answer 1

您可以将触发自定义错误消息的验证器函数作为规则传递给Form.Item。验证器应该返回一个Promise。例子:

<Form.Item
name="searchBox"
rules={[
{
required: true,
message: <IntlMessages id="common.error_address" />,
},{
// Validator function example
validator: (rule, value) => {
if (!this.isNew && this.state.hasTypedLocation && !this.state.hasChosenLocation ) {
return Promise.reject("Custom Error Message!!");
} else {
return Promise.resolve();
}
},
]}
>
<Input
type="text"
placeholder={intl.formatMessage({ id: 'common.error_address' })}
onChange={onChangeHandlerAddress}
value={facilityData.address1}
/>
</Form.Item>