React-redux-form: How to add class to <Field /> if validation fails

[davidspiess]

If a field validation fails, i want to add a has-warning class to it and a form-control-warning to the input itself.
What would be the recommended way to do something like that?

Right now i'm thinking about using the props.formName.fields.inputName.validproperty but a cleaner approach would be IMO the ability to access the props of each field in a callback like so

<Field model="login.email" validators={{ isEmail }} validateOn="change">
  {({ valid, validated, validating, value, ..otherFieldProps }) => 
    <div className={ valid ? "" : "has-warning" }>
      <input type="email" className={ valid ? "" : "form-control-warning" } />
    </div>
  }
</Field>

This would make it a lot easier to do something like adding custom classes.
How is your opinion, have you other suggestions? :)

[davidkpiano]

I really like the idea of functions as children, and am looking to make that a general capability in V1.

But for classNames specifically (and this is something I can add right now), I was thinking of adding a classNames prop:

<Field model="login.email"
  classNames={{
    focus: 'is-focused',
    pristine: 'is-pristine',
    error: 'has-error',
  }}
>
// ...

Or maybe even with a function:

<Field model="login.email"
  classNames={(field) => field.errors.required ? 'error-required' : ''}
>
// ...

[davidspiess]

Glad you like it! I saw this pattern recently in react-intl and it makes things really flexible.

Beside that, i like your classNames proposal, only downside i can see is it would not be possible to add a class to the <input type="email" /> inside the Field too. Bootstrap requires me to do that :disappointed:

[davidkpiano]

Yeah, with children as function that would become doable:

import classNames from 'classnames';

// ...

<Field model="...">
{(field) => <input type="email" className={classNames({focused: field.focus})} />}
</Field>

[davidspiess]

Awesome :) Looking forward to v1.0 :tada:

[davidkpiano]

Children as function components for <Field> are now available in the latest @beta! Just use the pattern above.