Puedo pasar al siguiente paso en el formulario de paso antd a pesar de que he agregado la validación en react.js He usado la validación predeterminada del formulario antd
const steps = [ { title: "Service Address", content: ( <Form form={form}> <Card> <h1>Lead Information</h1> <Form.Item rules={[{ required: true }]} name={"first_name"} label="First Name" > <Input /> </Form.Item> </Card> </Form> }, { title: "Service Information", content: "Second-content", },Y este bucle de mi mapa para devolver los pasos.
return ( <> <Steps current={current} > {steps.map((item) => ( <Step key={item.title} title={item.title} /> ))} </Steps> <div className="steps-content">{steps[current].content}</div> {current < steps.length - 1 && ( <Button type="primary" onClick={() => next()}> Next </Button> )} ) </>¿Alguien puede ayudarme con esto? Gracias de antemano
Parece que no lo está haciendo correctamente, la validación solo funciona si envía un formulario; de lo contrario, no activa la validación.
Debe enviar el formulario haciendo clic en el botón Siguiente.
const next = () => { setCurrent((prev) => prev + 1); }; const onSubmit = (formValues) => { console.log(formValues) next(); }; const steps = [ { title: "Service Address", content: ( <Form form={form} onFinish={onSubmit}> <Card> <h1>Lead Information</h1> <Form.Item rules={[{ required: true }]} name={"first_name"} label="First Name" > <Input /> </Form.Item> </Card> </Form> ) }, { title: "Service Information", content: "Second-content" } ]; return ( <div className="App"> <Steps current={current}> {steps.map((item) => ( <Steps.Step key={item.title} title={item.title} /> ))} </Steps> <div className="steps-content">{steps[current].content}</div> {current < steps.length - 1 && ( <Button type="primary" onClick={form.submit}> Next </Button> )} </div> );Puede ver un ejemplo de trabajo aquí: https://codesandbox.io/s/upbeat-faraday-o16hj?file=/src/App.js