Angular Academy · Oppitunti

Mukautettu validointi

Toteuttakaa vankkoja mukautettuja validointeja.

Oppitunti 3/310 vaihetta

Mukautettu validointi on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/3. 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ä 3 oppituntia.

Mukautettu validointi Angular-lomakkeissa

Oppikaa toteuttamaan mukautettuja validaattoreita, jotta voitte varmistaa Angular-sovellustenne lomakkeiden luotettavan validoinnin.

Mitä mukautettu validointi on

Mukautettujen validaattorien avulla voitte määrittää oman validointilogiikkanne sisäänrakennettujen validaattorien, kuten required- tai minlength-validaattorin, lisäksi.

Mukautetun validaattorin luominen

Mukautettu validaattori on yksinkertainen funktio, joka palauttaa null-arvon, jos arvo on kelvollinen, tai olion, jos se ei ole kelvollinen:

function forbiddenNameValidator(control: AbstractControl): { [key: string]: any } | null {
  return control.value === 'admin' ? { 'forbiddenName': true } : null;
}

Validaattorin käyttäminen

Käytä mukautettua validaattoria lomakekontrollissa:

this.myForm = new FormGroup({
  username: new FormControl('', [forbiddenNameValidator])
});

Validointivirheiden näyttäminen

Näytä virheilmoitukset mallissa ehdollisesti validointitilan perusteella:

<div *ngIf="myForm.get('username').hasError('forbiddenName')">
  Username 'admin' is not allowed.
</div>

Validaattoridirektiivien käyttäminen

Validaattoreita voi käyttää myös suoraan direktiiveinä mallipohjaisissa lomakkeissa:

<input name="username" ngModel forbiddenName>

Asynkroniset validaattorit

Asynkronisten validaattorien avulla voitte suorittaa validointeja, jotka sisältävät asynkronisia toimintoja, kuten palvelintarkistuksia:

username: new FormControl('', null, [asyncValidator])

Mukautettujen validaattorien testaaminen

Testatkaa validaattorit aina varmistaaksenne, että ne toimivat oikein erilaisissa tilanteissa ja poikkeustapauksissa.

Yhteenveto

Olette oppineet rakentamaan ja käyttämään mukautettuja validaattoreita luotettavaa lomakkeiden validointia varten Angularissa. Erinomaista työtä!

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 ”Mukautettu validointi” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Mukautettu validointi”. 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ä 3 oppituntia.

Mitä opin oppitunnilla ”Mukautettu validointi”?

Toteuttakaa vankkoja mukautettuja validointeja. 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/3.

Kuinka kauan ”Mukautettu validointi”-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