CODEWITHSUNDEEP
reactjsreduxantd
Raffaeu
Raffaeu

Reputation: 6973

Custom validation with Antd and redux-form-antd

I am using redux-form-antd and I am getting somehow confused regarding validation. For an Input I am using the following:

import { Field } from "redux-form";
import { TextField } from 'redux-form-antd';

// validation
const validateAcronym = {
    validate: v => (v ? '' : 'Error')
};

// form layout
const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
    },
};

// antd field
<Field
    {...formItemLayout}
    {...validateAcronym}
    label="Acronym" name="acronym"
    component={TextField}
    placeholder="The Acronym of this Token"
/>

What I don't like is the Error message of my Field. I would like to use a lambda so that I can pass a custom error message on each field but if I transform the validate into a Lambda, I get errors on React. What is the correct way?

Upvotes: 0

Views: 429

Answers (1)

Mike
Mike

Reputation: 424

I use "redux-form-antd": "3.0.3" and this way works for me.

validations.js

export const required = value => (value ? undefined : 'Required');

Form.js

import { required } from './validations';

<Field
    label="Acronym" name="acronym"
    component={TextField}
    validate={[required]}
    placeholder="The Acronym of this Token"
 />

I hope this help, Cheers

Upvotes: 1

Related Questions