View source for Custom Control Validation in AntD

[[Category:React]]
[[Category:AntD]]

== In the component ==
Import forwardRef from react 
<pre>
import React, { Fragment, useState, useEffect, forwardRef } from "react";
</pre>
at the end of the file before export it add this forwardRef line
<pre>
IndemnityLimits = forwardRef(IndemnityLimits);
export default Form.create()(IndemnityLimits);
</pre>
== In the page  ==
Write custom validation function In the page where you consume the component. Parameters are fixed. If you need to pass more then one value use object or array like below
<pre>
    const checkIndemnity = (rule, value, callback) => {
        if (value && value[0] && value[1] && value[2]) {
            callback();
            return;
        }
        callback("Indemnity limits must be selected!");
    }
</pre>
Use the validation in getFieldDecorator
<pre>
<Form.Item label={question.questionName} key={fieldId} className={classname}>
                    {getFieldDecorator(fieldId, { initialValue: data[fieldId], rules: [{ validator: checkIndemnity }] })(
                        <IndemnityLimit
                            …
                        </IndemnityLimit>
                    )}
                </Form.Item>
</pre>
== In the component ==
Validator comes to props as onChange
<pre>
function IndemnityLimits(props, ref) {
...
    let validationArray = [true, true, true]
prepare the values to send them back to validate function and pass them via props.onChange
const validatate = (rg) => {
        if (rg == "RGD") {
            validationArray = [true, validationArray[1], validationArray[2]]
        }
        if (rg == "RGE") {
            validationArray = [validationArray[0], true, validationArray[2]]
        }
     ...
        props.onChange(validationArray);
    }
</pre>
Call validate function in the component
<pre>
 const updateSelectedValues = (rg, name, value) => {
        validatate(rg);
    }

 <input type="radio"
    key={limitName + k.indemnityId}
    name={limitName}
    value={k.indemnityId}
    onChange={() => updateSelectedValues(limitName, fieldId + "A" + limitName, k.indemnityId)}
</pre>