Reusable Custom Form Components

[richardaday]

In an application that contains many forms, it is advantageous to create reuseable form components.

For example, consider a Numbercomponent. It's propTypes may look like:

{
  name: PropTypes.string.isRequired,
  required: PropTypes.bool,
  label: PropTypes.string,
  value: PropTypes.number
}

This Number component would contain it's own validation which ensures the value is a number.

How can I create this Number component and force redux-form to depend on the component's validation? I am trying to design this in a way where I can just use the Number component in any form and get the automatic validation.

The only idea I have at the moment is that the validate function could look through this.refs and check if the component has a method called isValid and verify if it returns true.

Thoughts?

[erikras]

I would argue/suggest that the validation is "business" (not presentation) logic, and perhaps should not be done in the individual input component. I prefer input components that take a name, label, value and error message, and let the validator for the whole form perform the validation.

You can, of course, still use redux-form without the validation part, and do the validation separately, either on the fly, with onBlur or onChange, or later onSubmit. By doing it in the component, no matter what, you're going to have to cycle through them to check isValid before submitting, whether you use redux-form for the validation or not.

Don't know if that helps at all...?

[olivierrr]

I agree with @erikras

[richardaday]

Doesn't that go against what we're seeing with HTML5 forms? Inputs are declaring their own validation rules through parameters (required, maxlength, etc).

The idea of being able to use an "EmailInput" and adding a required property to it and having it "just work" is alluring. Am I the only one? Would this be a benefit to you or your application?

[erikras]

Yes, it does. And you should still use things like type="email" in your inputs, primarily to inform mobile devices with software keyboards, however React bucks a lot of industry trends, such as controller/view separation and even stylesheets.

React trends, like stateless function components, are pushing in the opposite direction, taking away as much logic and state from the leaves of the "DOM" tree as possible.

I'm not denying that the old way of having a toolbox of smart components to handle your validation is/was not useful; I have built and used them myself, but we're at a bit of a philosophical impasse here. From my vantage point, I think it's the wise move to choose functional over OO (to cite another example) and dumb stateless components over smart stateful components when encountering such forks in the design road.

I'm not even sure what redux-form could do to make the job of a component-based validation system easier...provide some sort of registry for sub-components to check in with? What would that even look like?

this.context.registerValidation('name', value => value.length > 25 ? 'Too long' : true);

??

[snowcxt]

We need this feature too. If you can provide #165 + get values function, that will be great.

[ooflorent]

HTML5 validation is not currently supported (#254).

However, if your component accepts onBlur, onFocus and onChange properties, it can mimic a native input and may be reusable.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.