Conditional validation concept

[vitkon]

What's this PR do?

This PR solves a problem when a component needs to be conditionally validated.
For these purposes a HOC <Control> has been introduced.

Its purpose is to:

• bind input
• set shouldValidate flag

Example JSX:

                    <Control name="email" shouldValidate={false} {...this.props}>
                        <TextField
                            style={{ marginBottom: '20px' }}
                            label="Enter your email"
                            fullWidth={true}
                            error={!!this.dirtyInputError('email')}
                            helperText={this.dirtyInputError('email')}
                        />
                    </Control>

Where should the reviewer start?

FormContainer.tsx

How should this be manually tested?

try examples/ folder, there should be a working example there

Any background context you want to provide?

Control can be moved to a separate file, it should not reside in FormContainer file.
It was just easier for experimentation.

What are the relevant tickets / issues?

#42

Screenshots (if appropriate)

Questions

This is an experimental concept. Let me know your thoughts.

[vitkon]

not used, will remove

[mattdell]

Could we get away without using a wrapper component and just populate shouldValidate as each bound input is rendered?

[vitkon]

what would be the best way to do it?

[mattdell]

I was thinking we could have a side effect when invoking bindInput that could update the state to register the field. Then the validation would only occur on registered fields.

That would work, but it wouldn't be able to unregister the field on unmount so that's where I draw a blank.

I like the thinking behind the approach here, but it feels like too much boilerplate. I'm trying to think if there's another way. 🤔

[vitkon]

Is HOC the boilerplate you're talking about?
From my POV it's the only solution that gives us full control (e.g. we can pass ref down of not based on the child type) and allows to stay declarative.

One other thing to consider: child input might have a locked down interface (e.g. with Typescript) and won't allow for any arbitrary props like shouldValidate

What's left is to move shouldValidate to validators, but it has less access to conditional logic in JSX that can be reused.

[vitkon]

same concept in redux-form btw:
https://codesandbox.io/s/8zwvq2zr

so seems like I'm not inventing the wheel here ;)