1. Account & API-sleutel
Log in op dashboard.formly.io en genereer een API-sleutel onder Instellingen. Bewaar deze veilig; je hebt deze nodig voor elke request.
Quickstart
Van nul tot werkend formulier in 5 minuten
Volg deze stappen om je eerste Formly formulier te implementeren. Geen gedoe, alleen code en data.
Wat je nodig hebt
We bouwen een simpel contactformulier dat direct data naar de API stuurt. Je hebt een actief Formly-account nodig (gratis aan te maken) en een editor-omgeving zoals VS Code of een browser.
Formly is headless, wat betekent dat je de UI volledig zelf bouwt. Wij zorgen alleen voor de logica, validatie en de data-opslag.
De 5 stappen
Van installatie tot live data
Volg deze stappen om je eerste formulier live te krijgen.
2. SDK installeren
Installeer de core SDK in je projectmap via de terminal:
npm install @formly/core
3. Definieer het schema
Maak een JSON-bestand (bijv. `form.schema.json`) met de velddefinities. Dit definieert hoe je formulier eruitziet.
{"type": "text", "key": "naam", "label": "Je naam"}
4. Render in frontend
Importeer de component en pas het schema toe op je HTML/JSX. Formly zal de velden automatisch genereren.
<FormlyForm [form]="form" [fields]="fields" />
5. Ophalen via API
Haal inzendingen op met een GET request naar `/api/v1/submissions`. Gebruik je API-sleutel in de header.
GET https://api.formly.io/v1/submissions
Probleemoplossing
Veelgemaakte fouten
Formulier laadt niet
Controleer of je API-sleutel correct is geconfigureerd in de omgevingsvariabelen. Zorg dat de endpoint URL klopt.
Validatie werkt niet
Controleer de JSON-schema. De `type` moet overeenkomen met het type veld (bijv. `email`, `number`, `text`).
Data wordt niet opgeslagen
Zorg dat je de `onSubmit` handler hebt geïmplementeerd die de data naar de API stuurt. Zonder submit-handler blijft de data lokaal.
Volgende stappen
Verhoog de functionaliteit van je formulier.
Nu je basis werkt, kun je geavanceerde features toevoegen zoals conditiele logica, webhooks voor real-time updates, en gebruikersauthenticatie.
Bekijk onze documentatie voor gedetailleerde voorbeelden over hoe je complexe validaties bouwt en hoe je formulieren dynamisch aanpast op basis van gebruikersactie.
Volledige API-documentatie
Alles wat je moet weten over endpoints, schemas en integraties.