Angular Academy · Oppitunti

Asynkroniset validaattorit

Validoikaa tiedot palvelinta vasten asynkronisesti

Oppitunti 3/413 vaihetta

Asynkroniset validaattorit on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Validointi, joka odottaa

Jotkin validoinnit tarvitsevat palvelimen, esimerkiksi sen tarkistamiseen, onko käyttäjänimi jo käytössä. Asynkroniset validoijat palauttavat Promisen tai Observablen, joka ratkaisee tulokseksi virhekartan tai arvon null.

AsyncValidatorFn-tyyppi

Asynkroninen validoija ottaa vastaan ohjaimen ja palauttaa arvon Observable<ValidationErrors | null> tai Promisen.

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

Null tarkoittaa kelvollista

Palauta arvoksi null, kun arvo on kelvollinen, tai virheobjekti, kuten { taken: true }, kun se ei ole kelvollinen, aivan kuten synkronisissa validoijissa.

Käyttäjänimen validoija

Tämä validoija kutsuu palvelua ja muuntaa tuloksen.

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

Käyttöönotto

Asynkroniset validoijat annetaan ohjaimen kolmantena argumenttina erillään synkronisista validoijista.

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

PENDING-tila

Asynkronisen validoijan suorittamisen aikana ohjaimen tila on PENDING. Sen avulla voit näyttää latausilmaisimen.

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

Pyyntöjen debouncing

Asynkroniset validoijat suoritetaan jokaisen arvonmuutoksen yhteydessä. Käytä debounce-menetelmää, jotta palvelinta ei kuormiteta liikaa.

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

switchMap peruuttaa vanhentuneet kutsut

switchMap-funktion käyttäminen peruuttaa käynnissä olevan edellisen pyynnön, kun arvo muuttuu uudelleen, joten vain uusin tulos merkitsee.

updateOn-strategia

Aseta updateOn: 'blur', jotta asynkroninen validointi suoritetaan vasta, kun käyttäjä poistuu kentästä. Näin pyyntöjen määrä vähenee.

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

Virheen lukeminen

Näytä virhe, kun validointi on valmistunut ja ohjain on muuttunut tai saanut kohdistuksen.

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

Parhaat käytännöt

Käytä aina debounce-menetelmää, peruuta vanhentuneet pyynnöt, näytä odotuksen ilmaisin ja käsittele verkkovirheet, jotta lomake ei jää PENDING-tilaan.

Pikatarkistus

Testaa, kuinka hyvin ymmärrät asynkroniset validoijat.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opit, että AsyncValidatorFn palauttaa Observablen tai Promisen, jonka tyyppi on ValidationErrors | null, ja se rekisteröidään ohjaimen kolmantena argumenttina, jolloin ohjain siirtyy tilaan PENDING. Käytä debounce-menetelmää ja switchMap-funktiota palvelinkutsujen hallintaan.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 38
Oppitunnit: 144

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Asynkroniset validaattorit” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Asynkroniset validaattorit”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Asynkroniset validaattorit”?

Validoikaa tiedot palvelinta vasten asynkronisesti Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Asynkroniset validaattorit”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?

Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Angular Academy