fix(cibg): wizard fields render as grey fieldset groups
Wizard steps rendered bare .form-group divs, so CIBG's
".form-horizontal fieldset { background:#f1f5f9; margin-bottom:1.25em }"
never matched and inputs showed on white instead of the grey CIBG surface.
Wrap each logical field group per step in a <fieldset> (intake, herregistratie
and registratie wizards); CIBG then gives every group its grey surface with a
1.25em gap between groups. The shell stays group-agnostic (no outer fieldset,
which would hide the white gaps). address-fields already used a <fieldset>.
Adds intake-wizard.component.spec.ts asserting the buitenland step renders its
groups as separate fieldsets (guards against the wrapping being dropped again).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -130,40 +130,44 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
|
||||
}"
|
||||
(fieldChange)="set($event.key, $event.value)"
|
||||
/>
|
||||
<app-form-field
|
||||
i18n-label="@@regWizard.correspondentieLabel"
|
||||
label="Hoe wilt u correspondentie ontvangen?"
|
||||
fieldId="correspondentie"
|
||||
required
|
||||
[error]="err('correspondentie')"
|
||||
>
|
||||
<app-radio-group
|
||||
name="correspondentie"
|
||||
[options]="kanalen"
|
||||
[invalid]="!!err('correspondentie')"
|
||||
[ngModel]="draft().correspondentie ?? ''"
|
||||
(ngModelChange)="setKanaal($event)"
|
||||
/>
|
||||
</app-form-field>
|
||||
@if (draft().correspondentie === 'email') {
|
||||
<fieldset>
|
||||
<app-form-field
|
||||
i18n-label="@@regWizard.emailLabel"
|
||||
label="E-mailadres"
|
||||
fieldId="email"
|
||||
i18n-label="@@regWizard.correspondentieLabel"
|
||||
label="Hoe wilt u correspondentie ontvangen?"
|
||||
fieldId="correspondentie"
|
||||
required
|
||||
[error]="err('email')"
|
||||
[error]="err('correspondentie')"
|
||||
>
|
||||
<app-text-input
|
||||
inputId="email"
|
||||
type="email"
|
||||
[invalid]="!!err('email')"
|
||||
[ngModel]="draft().email ?? ''"
|
||||
(ngModelChange)="set('email', $event)"
|
||||
name="email"
|
||||
i18n-placeholder="@@regWizard.emailPlaceholder"
|
||||
placeholder="naam@voorbeeld.nl"
|
||||
<app-radio-group
|
||||
name="correspondentie"
|
||||
[options]="kanalen"
|
||||
[invalid]="!!err('correspondentie')"
|
||||
[ngModel]="draft().correspondentie ?? ''"
|
||||
(ngModelChange)="setKanaal($event)"
|
||||
/>
|
||||
</app-form-field>
|
||||
</fieldset>
|
||||
@if (draft().correspondentie === 'email') {
|
||||
<fieldset>
|
||||
<app-form-field
|
||||
i18n-label="@@regWizard.emailLabel"
|
||||
label="E-mailadres"
|
||||
fieldId="email"
|
||||
required
|
||||
[error]="err('email')"
|
||||
>
|
||||
<app-text-input
|
||||
inputId="email"
|
||||
type="email"
|
||||
[invalid]="!!err('email')"
|
||||
[ngModel]="draft().email ?? ''"
|
||||
(ngModelChange)="set('email', $event)"
|
||||
name="email"
|
||||
i18n-placeholder="@@regWizard.emailPlaceholder"
|
||||
placeholder="naam@voorbeeld.nl"
|
||||
/>
|
||||
</app-form-field>
|
||||
</fieldset>
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -171,21 +175,23 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
|
||||
<app-async [data]="lookupRd()">
|
||||
<ng-template appAsyncLoaded>
|
||||
@if (duoData(); as data) {
|
||||
<app-form-field
|
||||
i18n-label="@@regWizard.diplomaLabel"
|
||||
label="Kies het diploma waarmee u zich wilt registreren"
|
||||
fieldId="diploma"
|
||||
required
|
||||
[error]="err('diploma')"
|
||||
>
|
||||
<app-radio-group
|
||||
name="diploma"
|
||||
[options]="diplomaOptions(data)"
|
||||
[invalid]="!!err('diploma')"
|
||||
[ngModel]="diplomaKeuze()"
|
||||
(ngModelChange)="onDiplomaKeuze(data, $event)"
|
||||
/>
|
||||
</app-form-field>
|
||||
<fieldset>
|
||||
<app-form-field
|
||||
i18n-label="@@regWizard.diplomaLabel"
|
||||
label="Kies het diploma waarmee u zich wilt registreren"
|
||||
fieldId="diploma"
|
||||
required
|
||||
[error]="err('diploma')"
|
||||
>
|
||||
<app-radio-group
|
||||
name="diploma"
|
||||
[options]="diplomaOptions(data)"
|
||||
[invalid]="!!err('diploma')"
|
||||
[ngModel]="diplomaKeuze()"
|
||||
(ngModelChange)="onDiplomaKeuze(data, $event)"
|
||||
/>
|
||||
</app-form-field>
|
||||
</fieldset>
|
||||
|
||||
@if (handmatigActief()) {
|
||||
<app-alert type="warning" i18n="@@regWizard.handmatigWaarschuwing"
|
||||
@@ -193,20 +199,22 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
|
||||
uw beroep en beantwoord de aanvullende vragen; uw aanvraag wordt daarna
|
||||
handmatig beoordeeld.</app-alert
|
||||
>
|
||||
<app-form-field
|
||||
i18n-label="@@regWizard.beroepLabel"
|
||||
label="Voor welk beroep wilt u zich registreren?"
|
||||
fieldId="hm-beroep"
|
||||
[error]="err('diploma')"
|
||||
>
|
||||
<app-radio-group
|
||||
name="hm-beroep"
|
||||
[options]="beroepOptions(data)"
|
||||
[invalid]="!!err('diploma')"
|
||||
[ngModel]="draft().beroep ?? ''"
|
||||
(ngModelChange)="dispatch({ tag: 'DeclareerBeroep', beroep: $event })"
|
||||
/>
|
||||
</app-form-field>
|
||||
<fieldset>
|
||||
<app-form-field
|
||||
i18n-label="@@regWizard.beroepLabel"
|
||||
label="Voor welk beroep wilt u zich registreren?"
|
||||
fieldId="hm-beroep"
|
||||
[error]="err('diploma')"
|
||||
>
|
||||
<app-radio-group
|
||||
name="hm-beroep"
|
||||
[options]="beroepOptions(data)"
|
||||
[invalid]="!!err('diploma')"
|
||||
[ngModel]="draft().beroep ?? ''"
|
||||
(ngModelChange)="dispatch({ tag: 'DeclareerBeroep', beroep: $event })"
|
||||
/>
|
||||
</app-form-field>
|
||||
</fieldset>
|
||||
} @else if (draft().beroep) {
|
||||
<dl class="mb-0 app-section">
|
||||
<div
|
||||
@@ -218,35 +226,39 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
|
||||
</dl>
|
||||
}
|
||||
|
||||
@for (q of actieveVragen(data); track q.id) {
|
||||
<app-form-field
|
||||
[label]="q.vraag"
|
||||
[fieldId]="'vraag-' + q.id"
|
||||
[error]="vraagErr(q.id)"
|
||||
>
|
||||
@if (q.type === 'ja-nee') {
|
||||
<app-radio-group
|
||||
[name]="'vraag-' + q.id"
|
||||
[options]="jaNee"
|
||||
[invalid]="!!vraagErr(q.id)"
|
||||
[ngModel]="antwoord(q.id)"
|
||||
(ngModelChange)="
|
||||
dispatch({ tag: 'SetAntwoord', vraagId: q.id, value: $event })
|
||||
"
|
||||
[ngModelOptions]="{ standalone: true }"
|
||||
/>
|
||||
} @else {
|
||||
<app-text-input
|
||||
[inputId]="'vraag-' + q.id"
|
||||
[invalid]="!!vraagErr(q.id)"
|
||||
[ngModel]="antwoord(q.id)"
|
||||
(ngModelChange)="
|
||||
dispatch({ tag: 'SetAntwoord', vraagId: q.id, value: $event })
|
||||
"
|
||||
[ngModelOptions]="{ standalone: true }"
|
||||
/>
|
||||
@if (actieveVragen(data).length) {
|
||||
<fieldset>
|
||||
@for (q of actieveVragen(data); track q.id) {
|
||||
<app-form-field
|
||||
[label]="q.vraag"
|
||||
[fieldId]="'vraag-' + q.id"
|
||||
[error]="vraagErr(q.id)"
|
||||
>
|
||||
@if (q.type === 'ja-nee') {
|
||||
<app-radio-group
|
||||
[name]="'vraag-' + q.id"
|
||||
[options]="jaNee"
|
||||
[invalid]="!!vraagErr(q.id)"
|
||||
[ngModel]="antwoord(q.id)"
|
||||
(ngModelChange)="
|
||||
dispatch({ tag: 'SetAntwoord', vraagId: q.id, value: $event })
|
||||
"
|
||||
[ngModelOptions]="{ standalone: true }"
|
||||
/>
|
||||
} @else {
|
||||
<app-text-input
|
||||
[inputId]="'vraag-' + q.id"
|
||||
[invalid]="!!vraagErr(q.id)"
|
||||
[ngModel]="antwoord(q.id)"
|
||||
(ngModelChange)="
|
||||
dispatch({ tag: 'SetAntwoord', vraagId: q.id, value: $event })
|
||||
"
|
||||
[ngModelOptions]="{ standalone: true }"
|
||||
/>
|
||||
}
|
||||
</app-form-field>
|
||||
}
|
||||
</app-form-field>
|
||||
</fieldset>
|
||||
}
|
||||
}
|
||||
</ng-template>
|
||||
|
||||
Reference in New Issue
Block a user