I made dynamic form items. I taking datas from SQL Server and making inputs like :
const GenerateField = (val, obj = {}) => {
switch (val.CategoryProperty.DataTypeId) {
case 1:
return (
<Form.Item
name={val.CategoryProperty.Name}
required
label={val.CategoryProperty.Name}
>
<Input
name={val.CategoryProperty.Name}
onChange={(e) =>
updateDynamicForm(e.target.value, val.CategoryProperty.Id)
}
/>
</Form.Item>
);
case 2:
return (
<Form.Item
required
label={val.CategoryProperty.Name}
name={val.CategoryProperty.Name}
>
<Select
name={val.CategoryProperty.Name}
className="text-left"
onChange={(e) => updateDynamicForm(e, val.CategoryProperty.Id)}
>
{val.CategoryProperty.CategoryPropertyDetails.map((x) => {
return (
<Select.Option key={x.Id} value={x.Id}>
{x.Name}
</Select.Option>
);
})}
</Select>
</Form.Item>
);
case 3:
let GroupList = [];
val.CategoryProperty.CategoryPropertyDetails.forEach((element) => {
const newRow = {
label: element.Name,
value: element.Id,
};
GroupList.push(newRow);
});
const onChange = (checked) => {
updateDynamicForm(checked, val.CategoryProperty.Id);
};
return (
<Form.Item
valuePropName="checked"
required
label={val.CategoryProperty.Name}
name={val.CategoryProperty.Name}
>
<Checkbox.Group onChange={onChange} options={GroupList}>
Test CheckBox
</Checkbox.Group>
</Form.Item>
);
default:
break;
}
};
So as you can understand , Name tag always changing dynamicly. And my form is wizard form. So on my screen only have 2 question in 1 page. When i click next other 2 comes like that. So how can i verify and put rules to my dynamic input / Dropdowns ? For example : It cant be empty or It cant be lower than 2nd input or you must choose a dropdown option. How can i make it ? On my opinion i can verify with next button but my name tags always changing so i cant find that input / Dropdowns and check values. Thanks for responses!
An Image from my project : https://prnt.sc/1y30ni2 ( I need verify with Next ( "İleri" ) button. )