React-redux-form: [PROPOSAL] the <Errors> component

[davidkpiano]

Even for the simplest cases, displaying error messages can get pretty verbose:

{ userForm.fields.email.touched
  && userForm.fields.email.errors.isRequired
  && <div>Email address is required</div>
}

// ... etc. for other errors

What if we had a robust <Errors> component to help cut down this verbosity? The above example would become:

<Errors model="user.email" messages={{
  isRequired: 'Email address is required',
  isEmail: 'Must be a valid email address',
}} />

THE SPECIFICS

The full props for the <Error> component would look something like this:

<Errors
  model="user.email" // string or model getter function, just like Field
  messages={{...}} // map - <validation key>: <message> (string or JSX)
  show="touched" // string or array or function that takes field object as arg
  wrapper="div" // string or component class for container
  component="span" // string or component class for each child error
/>

The required props are model and messages.

Thoughts? I'd like to think this one through before introducing it.

[lasergoat]

correction: show="touched"

This sounds good. though I'd like to be able to specify a className for the child spans. What if we could pass JSX into the component field.

component={<span className="blah"></span>}

component={<MyElement></MyElement>}

[chrisblossom]

First thought it seems like it could make styles etc complicated. What about just having a showError true/false state per field?

dispatch(rrf.showError('userForm.email', true/false));

If you wanted to expand on that, there could be some config that would set the params to show errors.

const config = {
  showErrors: [touched, !valid, submitFailed],
}

EDIT: Also, the ability to store error messages already exists with the errors field (I think also possible with the validity field as well, just more difficult because of the way valid works.

[davidkpiano]

First thought it seems like it could make styles etc complicated. What about just having a showError true/false state per field?

I feel like this would make things more complicated, since you'd have to do this for every field and would result in unnecessary rerenders.

EDIT: Also, the ability to store error messages already exists with the errors field (I think also possible with the validity field as well, just more difficult because of the way valid works.

It's not encouraged, however, because of how validation works. RRF assumes that you won't hard-code error messages in your validation functions, but still gives you the option to have anything truthy (like a string) represented in .errors.

Per @lasergoat 's suggestion, I'm thinking along the lines of this for styling:

<Errors model="..."
  component={(msg) => <span className="error">{msg}</span>}
/>

which will give a lot of flexibility to how your error messages are displayed.

[davidkpiano]

This is now available in [email protected]!