Angular Academy · Lekcja

Walidatory asynchroniczne

Asynchronicznie weryfikować dane za pomocą serwera

Walidatory asynchroniczne to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Walidacja, która czeka

Niektóre reguły walidacji wymagają serwera, na przykład sprawdzenia, czy nazwa użytkownika jest już zajęta. Walidatory asynchroniczne zwracają Promise lub Observable, który rozstrzyga się do mapy błędów albo wartości null.

Typ AsyncValidatorFn

Walidator asynchroniczny przyjmuje kontrolkę i zwraca Observable<ValidationErrors | null> (lub Promise).

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

Zwrócenie null oznacza poprawność

W przypadku poprawnej wartości zwróć null, a w przypadku niepoprawnej — obiekt błędu, taki jak { taken: true }, dokładnie tak samo jak w walidatorach synchronicznych.

Walidator nazwy użytkownika

Ten walidator wywołuje usługę i mapuje wynik.

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

Rejestrowanie walidatora

Walidatory asynchroniczne przekazuje się jako trzeci argument kontrolki, oddzielnie od walidatorów synchronicznych.

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

Stan PENDING

Podczas działania walidatora asynchronicznego status kontrolki to PENDING. Można go użyć do wyświetlenia wskaźnika ładowania.

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

Debounce żądań

Walidatory asynchroniczne uruchamiają się przy każdej zmianie wartości. Zastosuj debounce, aby uniknąć przeciążania serwera.

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

switchMap anuluje nieaktualne wywołania

Użycie switchMap anuluje poprzednie żądanie będące w toku, gdy wartość ponownie się zmieni, więc znaczenie ma tylko najnowszy wynik.

Strategia updateOn

Ustaw updateOn: 'blur', aby walidacja asynchroniczna uruchamiała się dopiero po opuszczeniu pola przez użytkownika, ograniczając liczbę żądań.

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

Odczytywanie błędu

Wyświetl błąd po zakończeniu walidacji, gdy kontrolka została zmieniona lub dotknięta.

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

Najlepsze praktyki

Zawsze stosuj debounce, anuluj nieaktualne żądania, wyświetlaj wskaźnik oczekiwania i obsługuj błędy sieci, aby formularz nie utknął w stanie PENDING.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat walidatorów asynchronicznych.

Podsumowanie

Dowiedział się Pan/Dowiedziała się Pani, że AsyncValidatorFn zwraca Observable/Promise typu ValidationErrors | null i jest rejestrowany jako trzeci argument kontrolki, ustawiając ją w stanie PENDING. Należy stosować debounce i używać switchMap do zarządzania żądaniami do serwera.

Często zadawane pytania

Czy lekcja „Walidatory asynchroniczne” jest bezpłatna?

Tak — pełny tekst „Walidatory asynchroniczne” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Walidatory asynchroniczne”?

Asynchronicznie weryfikować dane za pomocą serwera Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Walidatory asynchroniczne”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy