Subscription flow

[geniton]

Fala daciuk,

tudo na paz?

cara, eu to refazendo um fluxo de assinatura aqui que contém 9 steps,

cada step desse ai é um component que é um form e o form é um component FormValidation, nele eu puxo todos os campos e faço as validações.

e retorno sempre 1 objeto com esses 2 caras aqui -> isValid e formError. caso os campos estejam invalidos o "isValid" vai ser false e o formError vai conter todos os campos invalidos, caso contrario isValid é true, e ai eu avanço de step de forma horizontal.

só que agora eu preciso deixar esse fluxo de forma vertical, de acordo com o avanço, eu vou exibindo mais steps abaixo.

minha dúvida é o seguinte, caso o usuario chegue na parte final e volte la em cima pra editar algum campo, como eu conseguiria validar todos os campos do step, se minha validação é apenas no submit do form? eu pensei em até colocar todos dentro de 1 form, pq ai ficaria até mais facil de validar.

mas como o form é um pouco grande e complexo, eu acho que ficaria até mais organizado deixar dessa forma msm, cada um com o seu form, mas ai eu nao sei como eu faria para chamar o submit dos form no resumo de todos os steps. é possivel fazer isso?

valeu mano! <3

@fdaciuk

[fdaciuk]

Oi @geniton! Deixa eu ver se entendi: você está usando um form para cada step, correto? Se sim, você consegue validar os campos de cada step isoladamente, não?

Assim não vai acontecer do usuário estar no último passo, e ter que voltar lá no primeiro porque faltou alguma coisa.

Isso funciona pra você?

[geniton]

Consigo sim, na verdade estou fazendo isso, é que quando ele passa de step eu tiro o botão submit do form e exibo o proximo step e assim adiante, só que quando ele chega no ultimo step ele não é um form e vai ter um botão de concluir assinatura, ai eu queria saber como eu faria pra validar, se caso o usuario volte nos steps anteriores e edite algum campo, pq no momento eu só faço a validação quando ele quer passar de step no botão submit.

será que teria algum jeito de eu validar isso? ou eu teria que mostrar o botão submit do step novamente pra validar? ou eu teria que criar alguma func com o evento onChange e fazer essa validação quando ele editar algum campo?

não sei se ficou claro!

valeu mano

[fdaciuk]

Acho que saquei haha :D Vamos lá: o que eu faria nesse caso: você pode ter um componente só de form, sem problema algum, ou pode ter vários forms. Tudo vai depender de como o seu backend espera essas informações.

Pelo que entendi, você precisa enviar tudo de uma vez só, mas validar por etapas, certo? Se for isso, o que eu te recomendaria é: crie o formulário com uma Context, e vá salvando os dados de cada step ali. Assim você consegue validar por etapas os valores de cada campo.

Ao final, você já vai estar com todos os dados guardados no estado da Context, e validados conforme cada step passado. Então só vai precisar submeter o form.

Entendi certo? :)

[geniton]

Isso mesmo mano.

mas se no caso o usuario ele editar algum campo dos steps anteriores? eu to falando isso pq ele vai ter a visibilidade de todos os steps e vai poder editar.

antes eu só exibia 1 step por tela, se ele passasse pro step2 por exemplo, eu só exibia o step2, se passasse pro step3 só exibia o step3, nesse caso ficava facil, pq quando ele voltasse, ele teria que clicar no botao continuar do form novamente e ai eu validava.

só que agora eu preciso exibir todos.

na medida que ele passa de step eu vou acumulando a baixo.

nesse caso como eu faria?

[fdaciuk]

Aí depende de como vai ser o layout disso. Cada step já preenchido fica sempre aberto?

[geniton]

Isso, na medida que ele passa eu vou deixando o step aberto

[fdaciuk]

Nesse caso, tem algumas formas de resolver:

• vc pode criar componentes controlados e validar no change de cada campo;
• vc pode usar o evento onBlur, e validar o campo quando esse perder o foco;
• ou vc pode validar tudo no final mesmo, e usar um ref para pegar a posição do primeiro campo com problema e "rolar" até lá, quando tentar submeter o formulário e algum campo for inválido :)

[geniton]

Boa mano, é que quando o usuario digita no formulario, eu nao faço nenhuma validação com o onChange rs, só quando ele tenta avançar.

Mas boa mano, é isso mesmo.

Com o seu nitro agora, dá pra resolver isso facil. kkk

Valeu fdaciuk.

Um grande abraço mano!

[fdaciuk]

Massa! Qualquer dúvida, avisa aí :)