Closed mohamedzaki90 closed 2 years ago
@mohamedzaki90 it's not a JHipster issue
JHipster generates:
<ValidatedForm ...>
<ValidatedField ... />
<ValidatedField ... />
<ValidatedField ... />
...
<Button ... />
</ValidatedForm>
and it works
I didn't say that the generated code is not working, I meant customization by adding nested elements does not work Try wrapping any field inside a div
ok maybe look this lib https://github.com/jhipster/react-jhipster
It's not possible to open an issue in the react-jhipster repo, possibly I don't have permissions?
strange cc @pascalgrimaud
It's not possible to open an issue in the react-jhipster repo, possibly I don't have permissions?
Issues is not enable there. Should be posted here.
Yes it's not strange, it's normal @qmonmert It's for centralizing all issues, so it's to have more visibility
The react-jhipster/validated-form.tsx says "The validated fields/inputs must be direct children of the form."
The children object needs recursive traversal like so:
const isValidatedChild = (child) => {
const type = child?.type;
return type
&& child?.props?.name
&& ['ValidatedField', 'ValidatedInput', 'ValidatedBlobField'].includes(type.displayName);
};
const isButton = (child) => {
const type = child?.type?.name;
return type && ['Button'].includes(type);
};
const conditionalCallback = (child, callback) => {
if (isButton(child) || isValidatedChild(child)) {
return callback(child)
}
return;
};
const mapRecursive = (currentChildren, callback) => (
React.Children.map(
currentChildren,
child => (
child?.props?.children
?
[ conditionalCallback(child, callback), mapRecursive(child.props.children, callback)]
: conditionalCallback(child, callback)
),
)
);
return (
<Form onSubmit={handleSubmit(onSubmit)} {...rest}>
{mapRecursive(children, (child: ReactElement) => {
const type = child?.type as any;
Sorry for the unformatted code snippet, can't figure out the github code formatting util.
This is not supported and that's why the comment is there. What we provide is just convenient wrappers. If you want to nest children and stuff, I suggest you use the library directly. Supporting this in Jhipster directly is too much work and not worth the effort as you can easily do it using the library
Overview of the issue
Try adding the form fields in a nested element
div
orCol
and then submit the form, the value associated with that field is not submitted or emptyMotivation for or Use Case
This is important for styling the generated forms and also nesting components
Reproduce the error
Generate a monolith application with react client, add any entity and try to adjust the generated entity-update.tsx ValidatedForm with the suggested change above. i.e add a column above any form field and try submitting any value
Related issues
https://github.com/jhipster/generator-jhipster/issues/15588
Suggest a Fix
JHipster Version(s)
7.3.0
JHipster configuration
Entity configuration(s)
entityName.json
files generated in the.jhipster
directoryBrowsers and Operating System