Multi step form with router
In Sib-subscription I need to use a multi step form. I use custum widgets for each step with the desired inputs in ther content like this exemple :
<!-- The router -->
<solid-router
default-route="informations"
use-hash
class="nav-menu"
>
<solid-route name="informations" class="bloc-nav bloc-nav-1" active>
<div class="bloc-nav-number">1</div>
<div class="bloc-nav-text">Informations préalables</div>
</solid-route>
<solid-route name="personne" class="bloc-nav bn2">
<div class="bloc-nav-number">2</div>
<div class="bloc-nav-text">Saisi de vos informations personnelles</div>
</solid-route>
<solid-route name="acceptations" class="bloc-nav bn3" >
<div class="bloc-nav-number">3</div>
<div class="bloc-nav-text">Lecture et acceptation des documents précontractuels</div>
</solid-route>
...
</solid-router>
<!-- In parent form -->
<div class="all-steps">
<solid-form
class="first-form"
data-src="${sourceUrl}"
fields="screen2(personne), screen3(acceptations), screen4(partquantity)"
widget-personne="widget-step-personne"
widget-acceptations="widget-step-acceptations"
widget-partquantity="solid-display-partquantity"
>
</solid-form>
</div>
<!-- Exemples of widgets -->
<solid-widget name="widget-step-personne">
<template>
<div id="personne" data-view="personne" hidden>
<h2>Tu souhaites souscrire en tant que</h2>
<solid-form
data-holder
naked
data-src="${sourceUrl}"
fields="typemember, step2(identity(corporate(corponame, siret), gender, person(firstname, name, mandat), email, phone, birthday(birthdate, birthcity, birthcountry), address(numberaddress, streetaddress, zipcode, cityaddress, countryaddress), mailacceptance, changemail))"
widget-typemember="solid-form-radio" range-typemember="${typememberRange}"
...
></solid-form>
<solid-link next="acceptations" class="bloc-validation">Valider et continuer</solid-link>
</div>
</template>
</solid-widget>
<solid-widget name="widget-step-acceptations">
<template>
<div data-view="acceptations" hidden>
<h2>Validation des documents précontractuels</h2>
<solid-form
data-holder
naked
data-src="${sourceUrl}"
fields="informationvalidation, statutes, cavalidation, servicesattestation, beneficiciaireconfirmation"
widget-informationvalidation="solid-display-informationvalidation"
widget-statutes="solid-display-statutes"
widget-cavalidation="solid-form-checkbox"
widget-servicesattestation="solid-form-checkbox"
widget-beneficiciaireconfirmation="solid-form-checkbox"
></solid-form>
<solid-link next="montant" class="bloc-validation">Valider et continuer</solid-link>
</div>
</template>
</solid-widget>
But, when page is loaded, in js console I see this error:
Uncaught Error: view "personne" is not in document
at HTMLElement.get view [as view] (solid-route.ts:29)
at HTMLElement.hide (solid-route.ts:128)
at HTMLElement.display (solid-router.ts:141)
at HTMLElement.init (solid-router.ts:73)
at solid-router.ts:15
The route links are fonctionnel but the init of router not. And if I have #personne
in url the div with data-view
attribute have no active
attribute.
My first question is if it's a good use of router with widgets ? And if router init is after widgets init ?