Share
Nesten alle nettsteder bruker skjemaer til å utføre forskjellige oppgaver som å registrere brukere eller få kontaktinformasjon. Det er svært viktig å sørge for at en bruker som fyller ut skjemaet, innlaster minst gyldig informasjon i inntastingsfeltene.
Det er også nødvendig å vise en detaljert feilmelding til brukerne, slik at de kan fylle ut skjemaet riktig. Denne prosessen kan bli svært komplisert når du må håndtere mange formelementer, som hver vil trenge egne tilpassede feilmeldinger. For å lindre smerten, angav Angular 1.3 en ny modul kalt ngMessages for å hjelpe utviklere til å validere skjemaer med letthet.
Modulen ngMessages gir deg muligheten til å vise tilpassede feilmeldinger til brukerne uten å skrive repeterende kode. I denne opplæringen lærer du hvordan du bruker denne modulen til å validere skjemaene dine. Du vil også lære å laste feilmeldingene eksternt og bare vise meldingene når de faktisk trengs.
La oss starte med å validere et enkelt inntastingsfelt med og uten hjelp av ngMessages for å se nytten av denne modulen. Uten å bruke ngMessages, vil merkingen for inngangselementet lignes på følgende kode:
Du vil også trenge følgende JavaScript-kode:
Accentsconagua
angular.module ('app', []);Alle andre formelementer må valideres på samme måte. Dette vil gjøre markeringen svært repeterende, noe som øker sjansene for feil. Hvis du bestemte deg for å bruke ngMessages for å validere samme skjemainngang, ville oppslaget ha sett ligner på følgende kode:
JavaScript-koden vil nå bli:
angular.module ('app', ['ngMessages']);Her har vi brukt ng-meldinger direktiv for å gruppere feilmeldingene sammen. Verdien passert til ng-meldinger Direktivet følger mønsteret formName.inputName $ error.. I vårt tilfelle vurderer dette til formValidation.username $ error..
På samme måte kan du også få verdien av ng-meldinger direktiv for alle de andre feltene. ngMessages er avhengig av $ error objekt utsatt av ngModel-direktivet for å avgjøre om feilmeldinger skal vises eller skjules på nettsiden. Det løper gjennom $ error objekt å lete etter en nøkkel som samsvarer med verdiene til noen av ng-meldingen direktiver.
Her er et fungerende eksempel som viser ovennevnte valideringskode i aksjon:
I denne delen vil vi validere et skjema med brukernavn, passord og et e-postfelt. Oppslaget for skjemaet vil se ut som følgende kode:
Som du kan se, er markeringen som kreves for å validere forskjellige formelementer, veldig lik. En viktig endring i dette tilfellet er tillegg av ng-mønster direktiv. Mønsteret vi bruker her sikrer at det innmeldte brukernavnet bare har alfanumeriske tegn og et understreke. De \ w i / ^ \ W + $ / står for ordkarakterer som A-Z, a-z, 0-9 og _.
Du bør prøve å skrive et annet brukernavn i brukernavnet. Etter en tid vil du legge merke til at skjemaet ikke klager på at et tegn ikke er alfanumerisk dersom det ble skrevet før de første seks tegnene eller etter de første 12 tegnene. Denne oppførselen er ikke veldig brukervennlig.
La oss for eksempel si at noen av brukerne starter brukernavnet med et utropstegn. De må vente til de har skrevet seks tegn for å få feilen om bare å bruke alfanumeriske tegn. Det vil være veldig frustrerende for dem å begynne å skrive brukernavnet igjen fra begynnelsen.
Som standard viser ngMessages bare en feil til brukeren om gangen. Derfor kunne meldingen om ugyldige tegn ikke vises før en bruker hadde skrevet mer enn seks tegn. Dessuten bruker ngMessages ordren der du skrev inn feilmeldingene som et hint for å bestemme deres prioritet.
Hvis du har oppgitt minimumstegnmeldingen før den alfanumeriske feilen, vil ngMessages vente til den minste tegnfeilen er løst før den viser den alfanumeriske feilen.
Her er det samme skjemaet med feilmeldingene som presenteres i en annen rekkefølge.
Du kan også vise alle gjeldende feilmeldinger til en bruker samtidig med å bruke ng-meldinger-multiplum. Hvis du ser flere feilmeldinger så snart brukerne begynner å skrive inn et inntastingsfelt, kan de overvelde dem.
Det er fortsatt mye gjentakelse i vårt oppslag. Hvis du vil vise den samme feilmeldingen for forskjellige inntastingsfelt, er det ikke fornuftig å gjenta det for hver av dem. Modulen ngMessages kan hjelpe deg med å skrive generiske feilmeldinger bare en gang, og inkludere dem i ditt skjema når behovet oppstår. Her er markeringen for å lage et skjema som viser generiske feilmeldinger til brukerne.
Akkurat som i forrige tilfelle bestemmes prioriteten av en melding av sitt sted i malen. Du kan også overstyre generiske meldinger som er oppgitt i malen, ved å inkludere en tilpasset feilmelding i enkeltfelt. Feilmeldingene kan også lastes fra en egen fil ved hjelp av følgende kode:
Du kan gjøre skjemaet mer brukervennlig ved bare å vise feilmeldinger når en bruker faktisk har gjort en feil mens du fyller ut skjemaene. For eksempel kan du velge å bare vise den nødvendige feltfeilen når en bruker faktisk hopper over et innspillingselement.
Dette kan oppnås ved å bruke enten ng-vis eller ng-hvis direktivet sammen med $ berørt og $ skitne. I tilfelle av $ berørt, Feilmeldingen vises så snart inngangen mister fokus. I tilfelle av $ skitne, Feilmeldingen vises så snart inngangen blir ugyldig.
Her er den demo som viser forskjellen mellom
$ berørtog$ skitne.Konklusjon
I denne opplæringen lærte du hvor lett det er å validere innspillet til ulike typer formelementer ved hjelp av ngMessages. Du lærte også å gjenbruke de samme feilmeldingene flere ganger for å unngå repetisjon og hvordan du prioriterer ulike feilmeldinger.
Du kan også bruke både ngMessages og ngAnimate sammen til å bruke egendefinerte animasjoner for å vise eller skjule feilmeldingen din. En veiledning om bruk av ngAnimate-modulen vil også bli publisert på Envato Tuts + snart.
Hvis det er noen tips du vil dele med medlesere eller hvis det er spørsmål du vil spørre, gi meg beskjed i kommentarene.
