Natuurlijk! Hier is een overzicht van hoe je events kunt afhandelen en DOM-elementen kunt manipuleren in TypeScript, specifiek gericht op een formulier met een submit-knop die je wilt valideren en dynamisch wilt aanpassen. ### 1. Event listener toevoegen Gebruik `addEventListener` om een event te koppelen aan een element, bijvoorbeeld een formulier of knop. ```typescript const form = document.querySelector<HTMLFormElement>('#mijnFormulier'); const submitButton = document.querySelector<HTMLButtonElement>('#submitKnop'); if (form && submitButton) { // Voeg een submit event toe aan het formulier form.addEventListener('submit', (event: Event) => { event.preventDefault(); // Voorkom standaard submit // Validatie functie aanroepen if (valideerFormulier()) { // Formulier doorsturen of andere acties form.submit(); } else { // Foutmelding tonen toonFoutmelding('Vul alle velden correct in.'); } }); // Optioneel: klik op de knop submitButton.addEventListener('click', () => { // Dynamisch aanpassen if (someVoorwaarde) { submitButton.disabled = true; // knop uitschakelen } else { submitButton.disabled = false; // knop inschakelen } }); } ``` ### 2. Elementeigenschappen aanpassen Je kunt eigenschappen van DOM-elementen aanpassen om dynamisch gedrag te realiseren: ```typescript const inputField = document.querySelector<HTMLInputElement>('#naam'); if (inputField) { // Bijvoorbeeld: de placeholder aanpassen inputField.placeholder = 'Voer uw naam in'; // De stijl aanpassen inputField.style.borderColor = 'red'; // Het attribuut 'disabled' aanpassen inputField.disabled = false; } ``` ### 3. Typeveiligheid bij DOM-manipulatie Gebruik generieke selectors met `<T>` types om typeveiligheid te garanderen: ```typescript const element = document.querySelector<HTMLInputElement>('#veldId'); if (element) { element.value = 'Nieuwe waarde'; // TypeScript weet dat 'value' bestaat } ``` ### 4. Validatie en dynamische aanpassing voorbeeld ```typescript function valideerFormulier(): boolean { const naam = document.querySelector<HTMLInputElement>('#naam'); if (naam && naam.value.trim() === '') { // dynamisch de border rood maken naam.style.borderColor = 'red'; return false; } else if (naam) { // border terugzetten naam.style.borderColor = ''; } return true; } function toonFoutmelding(bericht: string) { const foutDiv = document.querySelector<HTMLDivElement>('#foutmelding'); if (foutDiv) { foutDiv.textContent = bericht; foutDiv.style.display = 'block'; } } ``` ### Samenvatting - Gebruik `querySelector<T>` voor typeveiligheid. - Voeg event listeners toe met `addEventListener`. - Voer validaties uit en pas eigenschappen van DOM-elementen aan op basis van de validatie. - Gebruik TypeScript's type-informatie om typefouten te voorkomen. Wil je een volledig voorbeeld of specifieke functionaliteit uitgewerkt?

Zeker! Hier een uitgebreide uitleg over event handling en DOM-manipulatie in TypeScript voor formulieren. ## 1. Basis HTML Structuur ```html <form id="myForm"> <input type="text" id="username" required minlength="3"> <input type="email" id="email" required> <button type="submit">Versturen</button> <div id="error-message" class="hidden"></div> </form> ``` ## 2. TypeScript Implementatie ```typescript // Interface voor formulier data interface FormData { username: string; email: string; } // Hoofdklasse voor formulier handling class FormHandler { private form: HTMLFormElement; private usernameInput: HTMLInputElement; private emailInput: HTMLInputElement; private errorDiv: HTMLDivElement; constructor(formId: string) { // DOM elementen ophalen met type assertions this.form = document.getElementById(formId) as HTMLFormElement; this.usernameInput = document.getElementById('username') as HTMLInputElement; this.emailInput = document.getElementById('email') as HTMLInputElement; this.errorDiv = document.getElementById('error-message') as HTMLDivElement; this.initializeEventListeners(); } private initializeEventListeners(): void { // Submit event listener this.form.addEventListener('submit', (event: SubmitEvent) => { event.preventDefault(); this.handleSubmit(); }); // Input validation tijdens typen this.usernameInput.addEventListener('input', () => { this.validateUsername(); }); this.emailInput.addEventListener('input', () => { this.validateEmail(); }); } private handleSubmit(): void { if (this.validateForm()) { const formData: FormData = { username: this.usernameInput.value, email: this.emailInput.value }; console.log('Formulier verzonden:', formData); this.showSuccess(); } } private validateForm(): boolean { const isUsernameValid = this.validateUsername(); const isEmailValid = this.validateEmail(); return isUsernameValid && isEmailValid; } private validateUsername(): boolean { const value = this.usernameInput.value; if (value.length < 3) { this.showError('Gebruikersnaam moet minimaal 3 tekens bevatten', this.usernameInput); return false; } this.clearError(this.usernameInput); return true; } private validateEmail(): boolean { const value = this.emailInput.value; const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(value)) { this.showError('Voer een geldig e-mailadres in', this.emailInput); return false; } this.clearError(this.emailInput); return true; } private showError(message: string, inputElement: HTMLInputElement): void { // Foutbericht tonen this.errorDiv.textContent = message; this.errorDiv.classList.remove('hidden'); // Input stylen aanpassen inputElement.style.borderColor = 'red'; inputElement.classList.add('error'); } private clearError(inputElement: HTMLInputElement): void { // Foutbericht verbergen this.errorDiv.classList.add('hidden'); // Input styling resetten inputElement.style.borderColor = ''; inputElement.classList.remove('error'); } private showSuccess(): void { // Dynamisch succesbericht toevoegen const successDiv = document.createElement('div'); successDiv.textContent = 'Formulier succesvol verzonden!'; successDiv.className = 'success-message'; successDiv.style.color = 'green'; successDiv.style.marginTop = '10px'; this.form.appendChild(successDiv); // Bericht na 3 seconden verwijderen setTimeout(() => { successDiv.remove(); }, 3000); } // Methoden om elementen dynamisch aan te passen public disableForm(): void { const inputs = this.form.querySelectorAll('input, button'); inputs.forEach((input: Element) => { if (input instanceof HTMLInputElement || input instanceof HTMLButtonElement) { input.disabled = true; } }); } public enableForm(): void { const inputs = this.form.querySelectorAll('input, button'); inputs.forEach((input: Element) => { if (input instanceof HTMLInputElement || input instanceof HTMLButtonElement) { input.disabled = false; } }); } } // Gebruik document.addEventListener('DOMContentLoaded', () => { const formHandler = new FormHandler('myForm'); }); ``` ## 3. Type Safety Technieken ### a) Type Guards voor DOM Elementen ```typescript function isHTMLInputElement(element: Element): element is HTMLInputElement { return element instanceof HTMLInputElement; } function isHTMLButtonElement(element: Element): element is HTMLButtonElement { return element instanceof HTMLButtonElement; } ``` ### b) Null Checks met Type Assertions ```typescript const form = document.getElementById('myForm'); if (!form) { throw new Error('Formulier niet gevonden'); } const htmlForm = form as HTMLFormElement; ``` ### c) Custom Event Types ```typescript interface CustomFormEvent extends Event { detail: { formData: FormData; timestamp: Date; }; } // Custom event dispatchen const customEvent = new CustomEvent('formSubmitted', { detail: { formData: { username: 'test', email: 'test@example.com' }, timestamp: new Date() } }); form.dispatchEvent(customEvent); ``` ## 4. CSS Voorbeeld ```css .hidden { display: none; } .error { border: 2px solid red; } .success-message { color: green; font-weight: bold; } ``` ## Belangrijke punten: 1. **Type Assertions**: Gebruik `as HTMLInputElement` voor typeveiligheid 2. **Event Listeners**: Gebruik arrow functions om `this` context te behouden 3. **Null Checks**: Controleer altijd of elementen bestaan 4. **Type Guards**: Gebruik `instanceof` checks voor betere type safety 5. **Dynamische manipulatie**: Gebruik `classList`, `style` en `createElement` Dit patroon zorgt voor typeveilige, onderhoudbare code met duidelijke scheiding van concerns.