Hice elementos de formulario dinámico. Tomo datos de SQL Server y hago entradas como:
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; } };Entonces, como puede entender, la etiqueta de nombre siempre cambia dinámicamente. Y mi forma es forma de asistente. Entonces, en mi pantalla solo tengo 2 preguntas en 1 página. Cuando hago clic en Siguiente, otros 2 vienen así. Entonces, ¿cómo puedo verificar y poner reglas a mi entrada dinámica/desplegables? Por ejemplo: no puede estar vacío o no puede ser inferior a la segunda entrada o debe elegir una opción desplegable. ¿Cómo puedo hacerlo? En mi opinión, puedo verificar con el siguiente botón, pero mis etiquetas de nombre siempre cambian, por lo que no puedo encontrar esa entrada / menús desplegables y verificar los valores. ¡Gracias por las respuestas!
Una imagen de mi proyecto: https://prnt.sc/1y30ni2 (Necesito verificar con el botón Siguiente ("İleri").)