What about custom component and validate props for the redux field?
Closed this issue · 6 comments
Hey, saw you at the PHPUK conference the other day, great talk!
Wanted to checkout this liform library, as loading a redux-form from a json file is exactly what I was looking for.
Question is, does it have the ability to use custom component and validate props for the redux Field?
So for example how would I map out the following in the json:
<Field
name="email"
component={TextField} // custom component I import
type="email"
label={t('form.label.email')}
validate={[required, email]} // email and required are custom validatiors I import
/>
<Button
type="submit"
disabled={ this.props.submitting }
text={t('form.button.submit')}
/>
Hi and thanks!
Yes, basically this kind of customisation is why we created the library (the bootstrap theme that comes with the library is not the one we use, our widgets are very particular). I have created some sample code for you: https://github.com/nacmartin/liform-daniel-example
It is also running here: https://nacmartin.github.io/liform-daniel-example/
Out of the box you have validation using ajv, so if you specify a required option or/and a format in the json-schema, they will be used for validation.
The second example shows how to create a custom widget with some specific validation.
And the third example shows how to change the form layout, in case you want to customise your submit button or something like that.
I will work further on the documentation of this library, because although all of this is explained there, it is scattered in several pages. So maybe some kind of step-by-step tutorial like the one I just did for your use case would clarify ideas.
Thanks so much, I will be giving it a go this coming week. Great idea, glad I found you at the conference :-) keep up the great work!
How would you handle translations? for example I am using react-i18next, and I would rather pass the "t" function down to the custom widget (instead of decorating the custom widget with the translate mixin). Or alternatively, make sure the translation happens before the labels even get the to the widget. What are your thoughts? thanks in advance!
Sorry to bug again, also just wondering how would you handle fields dependent on other fields, e.g. ticking a checkbox shows an additional field http://redux-form.com/6.5.0/examples/selectingFormValues/
Hi, About the i18n. We don't have that need at the moment but I think that it is important to have it as soon as possible, so I have added support for using it in custom widgets (the default theme doesn't have it because it would mean to choose a i18n lib and force people to download it with this library).
It was technically posible to decorate custom fields with the react-i18n next decorator to have i18n, but I guess that it is better to just decorate the form, so now it is possible.
So there is now a 4th example in https://nacmartin.github.io/liform-daniel-example/
https://github.com/nacmartin/liform-daniel-example/blob/master/src/js/Example4.js
Basically you can now pass a "context" object https://github.com/nacmartin/liform-daniel-example/blob/a69542329aebf65ff22426bb93721b80b09c3e49/src/js/Example4.js#L104
And then it is available in the fields you write: https://github.com/nacmartin/liform-daniel-example/blob/a69542329aebf65ff22426bb93721b80b09c3e49/src/js/Example4.js#L18
There is also the built-in validation, in that case I'd pass your own sync validator based on the one that liform-react is using, but translating the messages with the i18n addon of the ajv validator.
About the dependant fields, I think that is doable right now, especially if you can define the structure of the json-schema. In that case I group these two fields, nesting them in an object, and rendering that object with a custom widget. In that widget you can pretty much do whatever you want using redux-form. I will try to find the time to write an example... arf, I have also to find time to document all the stuff we are talking about, i18n and so on, so other people can find it :)