Valider dataoppføring med AngularJS

Når vi jobber med å bygge enkeltsidige applikasjoner, er et av punktene vi kan markere datainføringen, denne typen funksjonalitet utføres vanligvis ved bruk av en skjemaSelvfølgelig, hvis vi skal be om data fra en bruker, må vi validere at de ikke kommer med feil.
Heldigvis AngularJS Den har noen interne mekanismer som lar oss foreta valideringer på en enkel måte, slik at skjemaet bare kan sendes når dataformatbetingelsene er oppfylt.
Det første vi kommer til å trenge er a skjema, vi skal plassere noen felt, for eksempel navn, etternavn og et e -postfelt, generelt er dette de mest brukte feltene, og det vil gi oss muligheten til å generere valideringer. La oss se den første koden vi har:

Navn:Etternavn:E-post:Alder:Sende

Hvis vi ser har vi brukt egenskaper av HTML for å validere feltene, for eksempel ved å plassere eiendommen nødvendig for obligatoriske felt vil de tro at dette bare vil fungere i nyere eller kompatible nettlesere HTML5 bare, men når vi bruker AngularJS, vil dette fylle alternative valideringer hvis vi åpner programmet i en nettleser som ikke er kompatibel med HTML5.
Vi ser at aldersfeltet, bortsett fra typevalidering, har to egenskaper av AngularJS som er for feltets lengde, betyr dette at vi bare kan plassere tall mellom 1 og 3 sifre totalt.
Så langt går det bra med treningen vår, men vi må fortsatt validere at for å sende dataene må alt valideres, for dette må vi generere en kontroller som lar oss gjøre dette, for dette skal vi indikere til skjemaet som kontrolleren skal bruke, til vi skal endre linjen:

Av følgende:

Inne i kontrolleren kan vi få tilgang til en eiendom som heter $ gyldig, som er den som vil indikere om skjemaet vårt er gyldig for å kunne sende dataene, for dette må vi endre linjen for datasend -knappen med følgende:

Sende

Endringen bør være som følger:

Sende

Endelig kan vi opprette vår kontroller i AngularJS som vi skal behandle dataene våre med:

 function AddControllerUser ($ scope) {$ scope.message = ''; $ scope.addUser = function () {$ scope.message = 'Takk,' + $ scope.user.name + ', det er lagt til!'; }; } 

Dette bør gi oss et resultat som følgende i nettleseren vår:

Vi ser at ettersom det ikke er noen data, er send -knappen deaktivert, dette vil endre seg når vi fyller ut de riktige dataene slik vi ser i følgende bilde:

Hvis vi hadde plassert en e -post med feil format, hadde ikke knappen blitt aktivert, så ser vi hvordan AngularJS Det har gjort det lettere for oss å utvikle noe så enkelt som et skjema, og med dette fullførte vi denne opplæringen, vi har vært i stand til å validere et skjema på en fullstendig måte, bare ved å bruke egenskaper til HTML5 Og litt AngularJS.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng