Angular Academy · Lektion

Asynkrona validerare

Validera asynkront mot servern.

Lektion 3 av 413 steg

Asynkrona validerare är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Validering som väntar

Viss validering kräver en server, till exempel för att kontrollera om ett användarnamn redan används. Asynkrona validatorer returnerar ett Promise eller en Observable som ger en felkarta eller null.

Typen AsyncValidatorFn

En asynkron validator tar emot en kontroll och returnerar Observable<ValidationErrors | null> (eller ett Promise).

const v: AsyncValidatorFn = (control) => {
  return checkAvailable(control.value);
};

Att returnera null betyder giltigt

Returnera null när värdet är giltigt, eller ett felobjekt som { taken: true } när det är ogiltigt, precis som med synkrona validatorer.

En validator för användarnamn

Den här validatorn anropar en tjänst och mappar resultatet.

usernameValidator(api: UserApi): AsyncValidatorFn {
  return (control) =>
    api.isTaken(control.value).pipe(
      map(taken => taken ? { taken: true } : null)
    );
}

Registrera den

Asynkrona validatorer anges som kontrollens tredje argument, separat från synkrona validatorer.

new FormControl('', {
  validators: [Validators.required],
  asyncValidators: [usernameValidator(api)]
});

Tillståndet PENDING

Medan en asynkron validator körs är kontrollens status PENDING. Använd det för att visa en laddningsindikator.

@if (form.controls.username.pending) {
  <span>Checking...</span>
}

Avstudsa förfrågningar

Asynkrona validatorer körs vid varje värdeändring. Använd debounce för att undvika att överbelasta servern.

return timer(300).pipe(
  switchMap(() => api.isTaken(control.value)),
  map(taken => taken ? { taken: true } : null)
);

switchMap avbryter inaktuella anrop

Med switchMap avbryts den föregående pågående förfrågningen när värdet ändras igen, så att endast det senaste resultatet räknas.

Strategin updateOn

Ange updateOn: 'blur' så att asynkron validering endast körs när användaren lämnar fältet, vilket minskar antalet förfrågningar.

new FormControl('', {
  asyncValidators: [usernameValidator(api)],
  updateOn: 'blur'
});

Läsa felet

Visa felet när valideringen är klar och kontrollen är ändrad eller har fått fokus.

@if (form.controls.username.hasError('taken')) {
  <span>Username already taken</span>
}

Bästa praxis

Använd alltid debounce, avbryt inaktuella förfrågningar, visa en indikator för väntande validering och hantera nätverksfel så att formuläret inte fastnar i PENDING.

Snabbtest

Testa hur väl Ni förstår asynkrona validatorer.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni har lärt Er att AsyncValidatorFn returnerar en Observable eller ett Promise med ValidationErrors | null och registreras som kontrollens tredje argument, vilket försätter kontrollen i PENDING. Använd debounce och switchMap för att hantera serveranrop.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Asynkrona validerare” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Asynkrona validerare”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Asynkrona validerare”?

Validera asynkront mot servern. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Asynkrona validerare”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy