Altitude/SiteFrontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dropdown and additional info fields to form steps

Browse Source 
Updated form interfaces to include optional dropdown and additional info properties. Adjusted form rendering logic to handle these new fields, providing clearer instructions and choices for users. Refined validation messages for consistency and clarity.
This commit is contained in:
auto
2024-08-08 20:33:15 +02:00
parent 7407372b03
commit 94c336fb74
3 changed files with 69 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/form/genericForm.tsx
+49 -16
View File
@@ -82,22 +82,55 @@ const GenericForm = (formData: FormData) => {
<Form>
<div>
<label>
{steps[currentStep].label}
<Field
type={steps[currentStep].type}
name={steps[currentStep].name}
required={steps[currentStep].required}
min={steps[currentStep].min_length}
max={steps[currentStep].max_length}
as={(steps[currentStep].type === "textarea") ? "textarea" : "input"}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
handleChange(e);
if (prevLength !== values[steps[currentStep].name].length) {
setFieldTouched(steps[currentStep].name);
setPrevLength(values[steps[currentStep].name].length);
}
}}
/>
<label>
{steps[currentStep].label}
</label>
<label>
{
steps[currentStep].additional_info ?
steps[currentStep].additional_info?.split('\n').map((line, i) => (
<React.Fragment key={i}>{line}<br/></React.Fragment>
))
: null
}
</label>
</label>
<label>
{
steps[currentStep].drop_down ? (
<Field as="select"
name={steps[currentStep].name}
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
handleChange(e);
if (prevLength !== values[steps[currentStep].name].length) {
setFieldTouched(steps[currentStep].name);
setPrevLength(values[steps[currentStep].name].length);
}
}}>
{steps[currentStep].drop_down?.map((option, i) => (
<option key={i} value={option}>
{option}
</option>
))}
</Field>
) : (
<Field
type={steps[currentStep].type}
name={steps[currentStep].name}
required={steps[currentStep].required}
min={steps[currentStep].min_length}
max={steps[currentStep].max_length}
as={(steps[currentStep].type === "textarea") ? "textarea" : "input"}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
handleChange(e);
if (prevLength !== values[steps[currentStep].name].length) {
setFieldTouched(steps[currentStep].name);
setPrevLength(values[steps[currentStep].name].length);
}
}}
/>
)
}
<ErrorMessage name={steps[currentStep].name} component="div"/>
</label>
</div>