Formulieren met meerdere stappen en formulierstatus
Splits een lang registratieformulier op in meerdere stappen met een stappenteller in state en valideer de velden van alleen de huidige stap voordat u doorgaat naar de volgende.
Formulieren met meerdere stappen en formulierstatus is een gratis React Native Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.
Wat is een formulier met meerdere stappen?
Een formulier met meerdere stappen verdeelt een lange registratie- of betaalstroom in afzonderlijke, overzichtelijke stappen — meestal 2 tot 5 schermen. Elke stap richt zich op een verwante groep velden, waardoor de cognitieve belasting afneemt en meer gebruikers het formulier voltooien dan bij één lange pagina waar je doorheen moet scrollen. Veelvoorkomende voorbeelden zijn introductiewizards, betaalstromen met adres en betaling en profielinstellingen in meerdere stappen.
Eén formulierinstantie delen tussen stappen
De sleutel tot een formulier met meerdere stappen in react-hook-form is dat je één useForm-instantie voor het hele formulier maakt en control en errors als eigenschappen doorgeeft aan de component van elke stap. Zo blijven alle veldwaarden en de validatiestatus op één plek. Waarden die in stap 1 zijn ingevoerd, blijven beschikbaar wanneer de gebruiker stap 3 bereikt, en bij het verzenden van de laatste stap zijn alle formuliergegevens beschikbaar.
interface RegisterForm {
name: string;
email: string;
password: string;
phone: string;
city: string;
}
export default function RegisterScreen() {
const [step, setStep] = React.useState(1);
const form = useForm<RegisterForm>({ defaultValues: { name: '', email: '', password: '', phone: '', city: '' } });
return (
<View style={styles.container}>
{step === 1 && <Step1AccountInfo form={form} />}
{step === 2 && <Step2ContactDetails form={form} />}
{step === 3 && <Step3Review form={form} onSubmit={handleFinalSubmit} />}
</View>
);
}Eigenschappen van stapcomponenten definiëren
Elke stapcomponent ontvangt de formulierinstantie als eigenschap. Definieer een TypeScript-type voor die eigenschap met UseFormReturn uit react-hook-form. Hierdoor heeft de stapcomponent toegang tot control, formState.errors, trigger en watch — alle hulpmiddelen die nodig zijn om de eigen subset van velden weer te geven en te valideren.
import type { UseFormReturn } from 'react-hook-form';
interface StepProps {
form: UseFormReturn<RegisterForm>;
onNext?: () => void;
}
export function Step1AccountInfo({ form, onNext }: StepProps) {
const { control, formState: { errors } } = form;
// Render only name, email, and password fields
}Alleen de huidige stap valideren
Valideer voordat je naar de volgende stap gaat alleen de velden van de huidige stap met form.trigger(['fieldA', 'fieldB']). Hiermee wordt de validatie van de opgegeven velden uitgevoerd en retourneert de functie een Promise die naar true resolveert als alle velden geldig zijn. Als een veld ongeldig is, verschijnen de errors en kan de gebruiker pas verder nadat deze zijn opgelost. Velden in latere stappen worden nog niet gevalideerd.
async function handleNext() {
const step1Fields: (keyof RegisterForm)[] = ['name', 'email', 'password'];
const isValid = await form.trigger(step1Fields);
if (isValid) {
setStep(2);
}
// If invalid, formState.errors is populated for the listed fields
}Interface voor voortgangsweergave
Voeg bovenaan het scherm een visuele voortgangsbalk of stapindicator toe, zodat gebruikers weten hoever ze zijn. Bereken de voortgang als (currentStep / totalSteps) * 100. Een eenvoudige voortgangsbalk met een geanimeerde breedte van View geeft duidelijke feedback en maakt inzichtelijk hoeveel er nog nodig is voordat het formulier kan worden voltooid.
const TOTAL_STEPS = 3;
function ProgressBar({ current }: { current: number }) {
const progress = (current / TOTAL_STEPS) * 100;
return (
<View style={styles.progressContainer}>
<View style={[styles.progressFill, { width: progress + '%' }]} />
</View>
);
}
// Usage:
<ProgressBar current={step} />Tussen stappen navigeren
Gebruik een stappenteller in useState om de huidige stap bij te houden. Met de knop 'Volgende' valideer je de velden van de huidige stap met trigger voordat je de stap verhoogt. Met de knop 'Terug' verlaag je de stap zonder opnieuw te valideren. Schakel de knop 'Volgende' altijd uit of toon een laadindicator terwijl asynchrone validatie (zoals controles of een gebruikersnaam beschikbaar is) wordt uitgevoerd.
const { formState: { isValidating } } = form;
function NavigationButtons() {
return (
<View style={styles.navRow}>
{step > 1 && (
<Button title='Back' onPress={() => setStep((s) => s - 1)} />
)}
{step < TOTAL_STEPS ? (
<Button
title={isValidating ? 'Checking...' : 'Next'}
onPress={handleNext}
disabled={isValidating}
/>
) : (
<Button title='Submit' onPress={form.handleSubmit(onFinalSubmit)} />
)}
</View>
);
}Ingevoerde gegevens controleren in de laatste stap
De laatste stap is vaak een controlescherm waarop gebruikers hun invoer bevestigen voordat ze het formulier verzenden. Gebruik form.getValues() om alle veldwaarden te lezen en ze in een samenvattende lijst weer te geven. Zo krijgen gebruikers nog één kans om typefouten te ontdekken voordat de gegevens naar de server worden verzonden, waardoor het aantal ondersteuningsverzoeken en gebruikersfouten afneemt.
function Step3Review({ form, onSubmit }: StepProps) {
const values = form.getValues();
return (
<ScrollView>
<Text>Review your information:</Text>
<Text>Name: {values.name}</Text>
<Text>Email: {values.email}</Text>
<Text>Phone: {values.phone}</Text>
<Text>City: {values.city}</Text>
<Button title='Confirm and Register' onPress={onSubmit} />
</ScrollView>
);
}formState.isSubmitting gebruiken
formState.isSubmitting is true terwijl de asynchrone callback van handleSubmit wordt uitgevoerd. Gebruik deze waarde om de verzendknop uit te schakelen en tijdens de API-aanroep een laadindicator te tonen. Zo voorkom je dubbele verzendingen wanneer de gebruiker snel tikt en geef je duidelijke feedback dat het formulier wordt verwerkt.
const { formState: { isSubmitting } } = form;
<Button
title={isSubmitting ? 'Submitting...' : 'Confirm and Register'}
onPress={form.handleSubmit(onFinalSubmit)}
disabled={isSubmitting}
/>Stapgegevens tijdens navigatie bewaren
Als gebruikers het formulier met meerdere stappen verlaten en later terugkomen, gebruik je Zustand of de routeparameters van React Navigation om de huidige stap en gedeeltelijk ingevulde formuliergegevens te bewaren. Combineer dit met reset(savedValues) van react-hook-form om het formulier te herstellen naar de plek waar de gebruiker was gebleven. Dit vermindert het voortijdig verlaten van formulieren op mobiele apparaten aanzienlijk.
// On unmount or navigation away:
useEffect(() => {
return () => {
const currentValues = form.getValues();
useFormDraftStore.getState().saveDraft(currentValues, step);
};
}, []);
// On mount, restore if draft exists:
useEffect(() => {
const draft = useFormDraftStore.getState().draft;
if (draft) {
form.reset(draft.values);
setStep(draft.step);
}
}, []);Met het toetsenbord tussen velden navigeren
Op mobiele apparaten moet het tikken op 'Volgende' op het toetsenbord de focus naar de volgende invoer binnen een stap verplaatsen. Gebruik useRef om verwijzingen naar elke TextInput bij te houden en roep ref.current.focus() aan in de callback onSubmitEditing van elke invoer. Stel returnKeyType='next' in op tussenliggende velden en 'done' op het laatste veld van elke stap.
const emailRef = React.useRef<TextInput>(null);
const passwordRef = React.useRef<TextInput>(null);
<TextInput
placeholder='Full Name'
returnKeyType='next'
onSubmitEditing={() => emailRef.current?.focus()}
/>
<TextInput
ref={emailRef}
placeholder='Email'
returnKeyType='next'
onSubmitEditing={() => passwordRef.current?.focus()}
/>
<TextInput
ref={passwordRef}
placeholder='Password'
returnKeyType='done'
onSubmitEditing={handleNext}
secureTextEntry
/>Terugnavigatie veilig afhandelen
Wanneer de gebruiker op Android op de fysieke terugknop drukt of op iOS terugveegt, handel je dit af door de stappenteller te verlagen in plaats van het scherm volledig te verlaten. Gebruik useFocusEffect met een BackHandler om de fysieke terugactie te onderscheppen. Bevindt de gebruiker zich in stap 1, laat dan de normale navigatie terug naar het vorige scherm toe.
import { BackHandler } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';
useFocusEffect(
React.useCallback(() => {
const handler = BackHandler.addEventListener('hardwareBackPress', () => {
if (step > 1) {
setStep((s) => s - 1);
return true; // prevent default back navigation
}
return false; // allow default (exit screen)
});
return () => handler.remove();
}, [step])
);Korte controle
Test je begrip van de concepten voor mobiele ontwikkeling met React Native uit deze les.
Samenvatting van de les
In deze les heb je geleerd: één useForm-instantie die in alle stappen wordt gedeeld, houdt formuliergegevens en validatiestatus bij elkaar, trigger met specifieke veldnamen valideert alleen de huidige stap voordat je verdergaat, en formState.isSubmitting schakelt de verzendknop uit tijdens de laatste API-aanroep om dubbele verzendingen te voorkomen. Hierna gaan we formulieren verzenden en opnieuw instellen.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Formulieren met meerdere stappen en formulierstatus” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “Formulieren met meerdere stappen en formulierstatus”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus React Native Academy bevat in totaal 4 lessen.
Wat leer ik in “Formulieren met meerdere stappen en formulierstatus”?
Splits een lang registratieformulier op in meerdere stappen met een stappenteller in state en valideer de velden van alleen de huidige stap voordat u doorgaat naar de volgende. Je oefent met React Native Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met React Native Academy te beginnen?
Ervaring vooraf is niet nodig. React Native Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Formulieren met meerdere stappen en formulierstatus”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over React Native Academy?
Ja. Elke les over React Native Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- react-hook-form instellen met Controller
- Validatieregels en foutmeldingen
- Formulieren met meerdere stappen en formulierstatus
- Formulieren verzenden en resetten