eho/atomic-design-poc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extract reusable address-fields organism, adopt in both registratie call-sites

Browse Source 
The editable address block (straat/postcode/woonplaats) was hand-built inline in
two places — the registratie wizard and the change-request form. Factor it into one
pure presentational organism (values in, errors in, per-field change out) grouped in
a fieldset/legend, and adopt it in both. Behaviour, validation and state flow are
unchanged: the wizard still dispatches SetField (flipping adresHerkomst on edit) and
the change-request form still parses the postcode on submit. Storybook entry added;
other field clusters left inline by design (single-use or genuinely divergent).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Edwin van den Houdt
2026-06-26 17:25:39 +02:00
parent 64385999eb
commit 770d454a32
4 changed files with 101 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/registratie/ui/change-request-form/change-request-form.component.ts
View File

@@ -1,9 +1,8 @@
import { Component, output, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FormFieldComponent } from '@shared/ui/form-field/form-field.component';
import { TextInputComponent } from '@shared/ui/text-input/text-input.component';
import { ButtonComponent } from '@shared/ui/button/button.component';
import { HeadingComponent } from '@shared/ui/heading/heading.component';
import { AddressFieldsComponent, AdresValue } from '@registratie/ui/address-fields/address-fields.component';
import { Postcode, parsePostcode } from '@registratie/domain/value-objects/postcode';
/** A submitted change request carries a *parsed* postcode (branded Postcode),
@@ -19,19 +18,15 @@ export interface ChangeRequest {
straight from the parser's Result — no parallel "is it valid" flag to drift. */
@Component({
selector: 'app-change-request-form',
imports: [FormsModule, FormFieldComponent, TextInputComponent, ButtonComponent, HeadingComponent],
imports: [FormsModule, ButtonComponent, HeadingComponent, AddressFieldsComponent],
template: `
<app-heading [level]="2">Adreswijziging doorgeven</app-heading>
<form (ngSubmit)="onSubmit()" style="max-width:28rem">
<app-form-field label="Straat en huisnummer" fieldId="street" [error]="streetError()">
<app-text-input inputId="street" [(ngModel)]="street" name="street" [invalid]="!!streetError()" />
</app-form-field>
<app-form-field label="Postcode" fieldId="zip" [error]="zipError()">
<app-text-input inputId="zip" [(ngModel)]="zip" name="zip" placeholder="1234 AB" [invalid]="!!zipError()" />
</app-form-field>
<app-form-field label="Woonplaats" fieldId="city">
<app-text-input inputId="city" [(ngModel)]="city" name="city" />
</app-form-field>
<app-address-fields
idPrefix="cr"
[value]="{ straat: street, postcode: zip, woonplaats: city }"
[errors]="{ straat: streetError(), postcode: zipError() }"
(fieldChange)="onAdres($event)" />
<div style="margin-top:1rem">
<app-button type="submit" variant="primary">Wijziging indienen</app-button>
</div>
@@ -46,6 +41,12 @@ export class ChangeRequestFormComponent {
zipError = signal('');
submitted = output<ChangeRequest>();
onAdres(e: { key: keyof AdresValue; value: string }) {
if (e.key === 'straat') this.street = e.value;
else if (e.key === 'postcode') this.zip = e.value;
else this.city = e.value;
}
onSubmit() {
const street = this.street.trim();
this.streetError.set(street ? '' : 'Vul straat en huisnummer in.');