Hi,
to my point of vue Redwood Form implementation could improve verbosity and separation of concerns.
Isn’t it possible to wrap Label, Input and FieldError in the same component ?
Also, Isn’t it possible to Let the Higher Form make validations with external validation functions that keep business (or technical) validation logic (or wording) in a separated place ?
For this purpose, I’ve made a POC library (caution : very very disgusting code ^^) that try to respond to that needing : https://www.npmjs.com/package/react-form-lib
It would be great if Redwood supported a feature like that in the future to writing a form without have to add or insert some extra logics in it.
to explain my propos :
actual form like this :
<Form
onSubmit={onSubmit}
validation={{ mode: 'onBlur' }}
error={error}
formMethods={formMethods}
>
<FormError
error={error}
wrapperStyle={{ color: 'red', backgroundColor: 'lavenderblush' }}
/>
<Label name="email" errorClassName="error">
Email
</Label>
<TextField
name="email"
validation={{
required: true,
pattern: {
value: /[^@]+@[^.]+\..+/,
message: 'Please enter a valid email address',
},
}}
errorClassName="error"
/>
<FieldError name="email" className="error" />
</Form>
would become more readable (wrapped) and maintenable (separated) :
<Form
onSubmit={onSubmit}
validationRules={externalValidationFunctionByInputName} //<== see below
error={error}
formMethods={formMethods}
>
<FormError error={error} />
<FormItem
type="TextField"
name="email"
label="The Email"
sublabel="Only support redwood domain mail ;-)"
...whatever
/>
<input /> //(or custom <Input/> component)
</FormItem>
</Form>
Here the validation could be performed by Form component itself and FieldError rendered in FormItem if errors exists.
externalValidationFunctionByInputName :
It is just a declarative object to reference all validation rules by declared field name in Form. the benefit is a better maintenability of a big application with a lot of forms.
{
email: [ //<== the "name" of the field
{
key: "email_empty", //<== the key of the rule
message: "email is empty. Please enter it.",
isValid: (value) => (isNotEmpty(value)) //<== this function is used by Form to validate field and render FieldError component if needed
},
{
key: "email_invalid",
message: "email is not valid. Please enter it.",
isValid: (value) => (matchAnyPattern(value))
},
{...etc}
],
otherFieldName: [
{otherFieldFirstRule},
{...etc}
]
}