Redux Form: Input stays with 'touched: false'

Question

Wanted to validate my inputs and change the CSS depending of the user interaction.

Starting with a required validation method I wrap all my inputs component with a <Field> and pass to validate an array of func. Just required for now.

But for all my fields the value stay the same touched: false and error: "Required". If I touch or add stuff in the input, those values stay the same.

Validation

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

NameInput

import React from 'react';
import { Field } from 'redux-form'
import InputItem from 'Components/InputsUtils/InputItem';
import { required } from 'Components/InputsUtils/Validation';

const NameInput = () => (
  <Field
    name={item.spec.inputName}
    type={item.spec.type}
    component={InputItem}
    validate={[required]}
    props={item}
  />
);

export default NameInput;

InputItem

import React from 'react';

const InputItem = ({ spec, meta: { touched, error } }) => {        
  const { type, placeholder } = spec;
  return (
    <input
      className="input"
      type={type}
      placeholder={placeholder}
    />
  );
};

export default InputItem;

Answer 1

The redux-form controls its own props within your <input /> element as long as you use the spread operator to pass those props into your input.

For example, where you are doing const InputItem = ({ spec, meta: { touched, error } }) => ...

Try destructing the input from the Component: const InputItem = ({ input, spec, meta: { touched, error } }) => ...

And where you have your <input ... />, try doing the following:

<input
  {...input}
  className="input"
  type={type}
  placeholder={placeholder}
/>

The redux-form captures any onBlur and onChange events and uses its own methods to change the touched state. You just need to pass those along as shown above.

These are what you need: https://redux-form.com/7.1.2/docs/api/field.md/#input-props