Natuurlijk! Hier is een overzicht van hoe je een Angular formuliercomponent kunt ontwerpen die dynamisch velden genereert, inclusief beheer van status, validatie en verzending, met voorbeelden van tekstvelden, keuzelijsten en selectievakjes voor een gebruikersgegevens formulier. ### 1. Basisstructuur van de component Je maakt een component met een `FormGroup` dat dynamisch wordt opgebouwd op basis van een configuratie array. Deze configuratie bevat de details van de velden (type, label, validaties, opties). ```typescript import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; interface FieldConfig { name: string; label: string; type: string; // 'text', 'select', 'checkbox' options?: { value: string; display: string }[]; // Voor select en checkbox validation?: any[]; } @Component({ selector: 'app-dynamisch-formulier', templateUrl: './dynamisch-formulier.component.html' }) export class DynamischFormulierComponent implements OnInit { formulier: FormGroup; velden: FieldConfig[] = [ { name: 'voornaam', label: 'Voornaam', type: 'text', validation: [Validators.required] }, { name: 'achternaam', label: 'Achternaam', type: 'text', validation: [Validators.required] }, { name: 'geslacht', label: 'Geslacht', type: 'select', options: [ { value: 'man', display: 'Man' }, { value: 'vrouw', display: 'Vrouw' } ], validation: [Validators.required] }, { name: 'accepteer', label: 'Ik accepteer de voorwaarden', type: 'checkbox', validation: [Validators.requiredTrue] } ]; constructor(private fb: FormBuilder) {} ngOnInit() { this.buildForm(); } buildForm() { const group = {}; this.velden.forEach(veld => { group[veld.name] = ['', veld.validation]; }); this.formulier = this.fb.group(group); } // Verzend functie verzend() { if (this.formulier.valid) { console.log('Formulier data:', this.formulier.value); } else { this.formulier.markAllAsTouched(); } } } ``` ### 2. Template voor dynamische velden Gebruik `*ngFor` om door de velden te itereren en verschillende input types weer te geven, afhankelijk van de `type`. ```html <form [formGroup]="formulier" (ngSubmit)="verzend()"> <div *ngFor="let veld van velden"> <label>{{veld.label}}</label> <!-- Tekstveld --> <input *ngIf="veld.type === 'text'" [formControlName]="veld.name" type="text" /> <!-- Selectievakje --> <input *ngIf="veld.type === 'checkbox'" [formControlName]="veld.name" type="checkbox" /> <!-- Keuzelijst --> <select *ngIf="veld.type === 'select'" [formControlName]="veld.name"> <option *ngFor="let opt of veld.options" [value]="opt.value"> {{opt.display}} </option> </select> <!-- Validatie foutmeldingen --> <div *ngIf="formulier.get(veld.name).touched && formulier.get(veld.name).invalid"> <small *ngIf="formulier.get(veld.name).errors?.required">Dit veld is verplicht</small> <small *ngIf="formulier.get(veld.name).errors?.requiredTrue">Je moet dit accepteren</small> </div> </div> <button type="submit">Verzenden</button> </form> ``` ### 3. Beheer van status, validatie en verzending - **Status:** `formulier.status` geeft de status (bijvoorbeeld `'VALID'`, `'INVALID'`, `'PENDING'`). - **Validatie:** Angular valideert automatisch op basis van de ingestelde validators. Je kunt dit controleren via `formulier.valid`. - **Verzending:** Bij `verzend()`, wordt gecontroleerd of het formulier geldig is. Indien niet, worden alle velden gemarkeerd als getouched zodat foutmeldingen zichtbaar worden. Als het geldig is, worden de gegevens verwerkt (bijvoorbeeld verzonden naar een API). ### 4. Samenvatting - Dynamisch genereren van verschillende veldtypes via een configuratie array. - Beheer van validatie via Angular's `Validators`. - Toezicht op formulierstatus en validatiefouten. - Eenvoudige verzending met controle op validiteit. Wil je nog meer voorbeelden of specifieke aanpassingen?

Zeker! Hier een uitgebreide uitleg voor een dynamische Angular formuliercomponent: ## Basis Structuur ### 1. Component Template ```html <form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()"> <div *ngFor="let field of formFields" class="form-field"> <!-- Tekstinvoer --> <div *ngIf="field.type === 'text'"> <label [for]="field.name">{{ field.label }}</label> <input [type]="field.type" [id]="field.name" [formControlName]="field.name" [placeholder]="field.placeholder || ''"> <!-- Validatie foutmeldingen --> <div *ngIf="isFieldInvalid(field.name)" class="error-message"> <span *ngIf="dynamicForm.get(field.name)?.errors?.['required']"> {{ field.label }} is verplicht </span> <span *ngIf="dynamicForm.get(field.name)?.errors?.['minlength']"> Minimaal {{ field.validation?.minLength }} karakters </span> </div> </div> <!-- Keuzelijst (Select) --> <div *ngIf="field.type === 'select'"> <label [for]="field.name">{{ field.label }}</label> <select [id]="field.name" [formControlName]="field.name"> <option value="">Kies een optie</option> <option *ngFor="let option of field.options" [value]="option.value"> {{ option.label }} </option> </select> </div> <!-- Selectievakjes (Checkbox) --> <div *ngIf="field.type === 'checkbox'"> <label> <input type="checkbox" [formControlName]="field.name"> {{ field.label }} </label> </div> </div> <button type="submit" [disabled]="!dynamicForm.valid">Verzenden</button> </form> ``` ### 2. Component Class ```typescript import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; interface FormField { name: string; label: string; type: 'text' | 'select' | 'checkbox' | 'email' | 'number'; placeholder?: string; required?: boolean; validation?: { minLength?: number; maxLength?: number; pattern?: string; }; options?: { value: string; label: string }[]; } @Component({ selector: 'app-dynamic-form', templateUrl: './dynamic-form.component.html' }) export class DynamicFormComponent implements OnInit { dynamicForm: FormGroup; formFields: FormField[] = []; constructor(private fb: FormBuilder) { this.dynamicForm = this.fb.group({}); } ngOnInit() { this.loadFormFields(); this.buildForm(); } // Dynamisch velden laden (van API of configuratie) loadFormFields() { this.formFields = [ { name: 'voornaam', label: 'Voornaam', type: 'text', required: true, validation: { minLength: 2, maxLength: 50 } }, { name: 'achternaam', label: 'Achternaam', type: 'text', required: true, validation: { minLength: 2, maxLength: 50 } }, { name: 'email', label: 'E-mailadres', type: 'email', required: true }, { name: 'geslacht', label: 'Geslacht', type: 'select', required: false, options: [ { value: 'man', label: 'Man' }, { value: 'vrouw', label: 'Vrouw' }, { value: 'anders', label: 'Anders' } ] }, { name: 'nieuwsbrief', label: 'Ik wil de nieuwsbrief ontvangen', type: 'checkbox', required: false }, { name: 'leeftijd', label: 'Leeftijd', type: 'number', required: false, validation: { minLength: 1, maxLength: 3 } } ]; } // Formulier dynamisch opbouwen buildForm() { const formControls: any = {}; this.formFields.forEach(field => { const validators = []; if (field.required) { validators.push(Validators.required); } if (field.validation?.minLength) { validators.push(Validators.minLength(field.validation.minLength)); } if (field.validation?.maxLength) { validators.push(Validators.maxLength(field.validation.maxLength)); } if (field.type === 'email') { validators.push(Validators.email); } formControls[field.name] = ['', validators]; }); this.dynamicForm = this.fb.group(formControls); } // Validatie status controleren isFieldInvalid(fieldName: string): boolean { const field = this.dynamicForm.get(fieldName); return field ? field.invalid && (field.dirty || field.touched) : false; } // Formulier verzending onSubmit() { if (this.dynamicForm.valid) { console.log('Formulier data:', this.dynamicForm.value); // API call of verdere verwerking this.saveUserData(this.dynamicForm.value); } else { // Markeer alle velden als "aangeraakt" om foutmeldingen te tonen Object.keys(this.dynamicForm.controls).forEach(key => { this.dynamicForm.get(key)?.markAsTouched(); }); } } // Externe data verwerken updateFormFields(newFields: FormField[]) { this.formFields = newFields; this.buildForm(); } private saveUserData(userData: any) { // Implementeer je API call hier console.log('Gebruikersdata opslaan:', userData); } } ``` ## Status Management ### Formulier Status ```typescript // Status controleren console.log('Formulier valid:', this.dynamicForm.valid); console.log('Formulier invalid:', this.dynamicForm.invalid); console.log('Formulier pending:', this.dynamicForm.pending); console.log('Formulier pristine:', this.dynamicForm.pristine); console.log('Formulier dirty:', this.dynamicForm.dirty); // Individuele veld status const voornaamField = this.dynamicForm.get('voornaam'); console.log('Voornaam valid:', voornaamField?.valid); console.log('Voornaam errors:', voornaamField?.errors); ``` ## Geavanceerde Validatie Voorbeelden ### Custom Validator ```typescript // Custom validator voor wachtwoord bevestiging passwordMatchValidator(controlName: string, matchingControlName: string) { return (formGroup: FormGroup) => { const control = formGroup.controls[controlName]; const matchingControl = formGroup.controls[matchingControlName]; if (matchingControl.errors && !matchingControl.errors['passwordMismatch']) { return; } if (control.value !== matchingControl.value) { matchingControl.setErrors({ passwordMismatch: true }); } else { matchingControl.setErrors(null); } }; } // Async validator (bijv. voor gebruikersnaam beschikbaarheid) asyncUsernameValidator(control: AbstractControl): Observable<ValidationErrors | null> { return of(control.value).pipe( debounceTime(300), switchMap(username => this.userService.checkUsernameAvailability(username)), map(isAvailable => isAvailable ? null : { usernameTaken: true }), first() ); } ``` ## Dynamische Veld Toevoeging ```typescript addDynamicField() { const newField: FormField = { name: `veld_${Date.now()}`, label: 'Nieuw veld', type: 'text', required: false }; this.formFields.push(newField); this.dynamicForm.addControl(newField.name, this.fb.control('')); } removeField(fieldName: string) { this.formFields = this.formFields.filter(f => f.name !== fieldName); this.dynamicForm.removeControl(fieldName); } ``` ## Belangrijke Kenmerken 1. **Dynamische Generatie**: Velddefinities komen van configuratie/API 2. **Type Safety**: TypeScript interfaces voor velddefinities 3. **Validatie**: Built-in en custom validators 4. **Status Management**: Reactive Forms voor real-time status 5. **Schaalbaar**: Eenvoudig nieuwe veldtypes toevoegen 6. **Herbruikbaar**: Component kan overal worden gebruikt Deze aanbouw biedt een flexibele basis die je kunt uitbreiden met complexere veldtypes zoals datumkiezers, bestandsuploads, of conditionele velden!