antd validator ajax,reactjs - Antd Custom validator and validateFields are not working together as e...

Here how I handled the error in antd form

import React, { useState } from 'react';

import { Form, Input } from 'antd';

function MyCustomForm(props: any) {

const [form] = Form.useForm();

const [validateFieldsName, setValidateFieldsName] = useState([]);

const handleValidateFieldNames = (name: string) => {

const isFieldName = validateFieldsName.find(

(fieldName) => fieldName === name

);

if (isFieldName) return 'onChange';

return 'onBlur';

};

return (

name="contactNumber"

label="Contact Number"

validateTrigger={handleValidateFieldNames('contactNumber')}

rules={[

{

required: true,

message: 'Please enter contact number!',

},

{

validator(_, value) {

if (!value || value.length === 10) {

return Promise.resolve();

}

return Promise.reject('Please enter 10 digit Number!');

},

},

]}

>

type="number"

placeholder="Contact number"

onBlur={() =>

setValidateFieldsName([...validateFieldsName, 'contactNumber'])

}

/>

);

}

export default MyCustomForm;