Formly Schema Referentie
Een compleet overzicht van alle beschikbare veldtypes, templateOptions en validatie-regels.
Lees gids →
Technische gids
Conditionele logica
Conditionele logica
in formulieren.
Leer hoe je formulieren dynamisch maakt met Formly's schema-engine. Van simpele show/hide-regels tot complexe geneste logica.
Wat is conditionele logica en waarom gebruik je het?
Conditionele logica stelt je in staat om formuliervelden dynamisch te tonen of te verbergen op basis van de invoer van andere velden. Dit vermindert de cognitieve belasting voor gebruikers en zorgt voor een schonere, efficiëntere data-invoer.
Bij Formly behandelen we formulieren als JSON-schema's. De logica voor wat er zichtbaar is, wordt gedefinieerd binnen de eigenschappen van elk veld. Dit maakt het mogelijk om complexe vertakkingen te bouwen — bijvoorbeeld: "Toon het adresveld alleen als het land 'Nederland' is gekozen."
Omdat de logica declaratief is, blijft je frontend-code schoon. De UI-updates gebeuren automatisch via Formly's reactivity systeem.
Schema-syntax voor show/hide-regels
De kern van de logica zit in de expressionProperties eigenschap binnen een veld-configuratie. Je definieert hier een object waarbij de sleutel de UI-eigenschap is (zoals props.visible) en de waarde een expressie is die wordt geëvalueerd tegen het huidige model.
expressionProperties: {
'props.visible': 'model.land === "NL"'
}
In dit voorbeeld wordt het veld alleen zichtbaar als de waarde van model.land gelijk is aan "NL". Als de gebruiker een ander land selecteert, wordt het veld automatisch verborgen.
Voorbeeld: Adresveld tonen bij specifieke landkeuze
Stel je bouwt een registratieformulier voor een internationale klant. Je wilt dat gebruikers hun straatnaam en huisnummer invullen alleen als ze in Nederland wonen.
Configuratie voor postcode- en huisnummer
Hieronder zie je hoe je dit toepast op een postcodeveld. We gebruiken een geneste expressie om te controleren of het land 'NL' is.
{
key: 'postcode',
type: 'input',
templateOptions: {
label: 'Postcode',
placeholder: '1234 AB'
},
expressionProperties: {
'props.visible': 'model.land === "NL"'
}
}
Geneste condities en groepslogica
Formly ondersteunt geneste logica door gebruik te maken van de group structuur. Je kunt een groep velden definiëren en de zichtbaarheid van de hele groep bepalen op basis van één voorwaarde.
key: 'adres_groep',
fieldGroup: [
{
key: 'straat',
type: 'input',
templateOptions: { label: 'Straat' }
},
{
key: 'huisnummer',
type: 'input',
templateOptions: { label: 'Huisnummer' }
}
],
expressionProperties: {
'fieldGroup[0].props.visible': 'model.land === "NL"'
}
Hierdoor verberg je niet alleen één veld, maar een compleet blok formulier-invoer. Dit is ideaal voor secties zoals "Betalingsgegevens" of "Factuuradres" die alleen relevant zijn bij specifieke keuzes.
Prestatie-overwegingen bij complexe condities
Hoewel Formly efficiënt is, kunnen complexe expressies de prestaties beïnvloeden als ze te vaak worden geëvalueerd. Hier zijn best practices:
- Minimaliseer deep-walking: Vermijd expressies die diep in het model moeten zoeken (bijv.
model.user.profile.address.city). Houd je model plat en gestructureerd. - Gebruik simpele vergelijkingen: Vergelijkingen met strings of getallen zijn sneller dan complexe reguliere expressies of object-iteraties.
- Debounce input: Als je logica afhankelijk is van een zoekopdracht, gebruik een debounce-functie om de evaluatie niet op elke toetsaanslag uit te voeren.
Codevoorbeeld in React met Formly SDK
In een React-omgeving initialiseer je Formly met een configuratie-array. De logica wordt direct in de veld-definities geplaatst.
import { FormlyForm, FormlyModule } from '@ngx-formly/core';
const fields = [
{
key: 'land',
type: 'select',
templateOptions: {
label: 'Land',
options: [
{ label: 'Nederland', value: 'NL' },
{ label: 'België', value: 'BE' },
],
},
},
{
key: 'adres',
type: 'input',
templateOptions: { label: 'Adres' },
expressionProperties: {
'props.visible': 'model.land === "NL"',
},
},
];
// Render in JSX
// <FormlyForm model={model} fields={fields} />
Testen van conditionele formulieren
Het testen van dynamische formulieren vereist dat je de status van het model verandert en controleert of de UI correct reageert. Gebruik in je tests (bijv. Jest of Cypress) de setValue methode op het model.
// Test scenario: Adres wordt zichtbaar bij NL
model.land.setValue('NL');
expect(component.fields[1].props.visible).toBe(true);
// Test scenario: Adres wordt verborgen bij BE
model.land.setValue('BE');
expect(component.fields[1].props.visible).toBe(false);
Gerelateerde gidsen
Validatie in Formly
Leer hoe je ingebouwde validaties gebruikt en custom validatie-regels definieert.
Lees gids →API Integratie
Hoe je formulierdata veilig verstuurt naar je backend en hoe je webhooks configureert.
Lees gids →