Valider dataindtastning med AngularJS

Når vi arbejder på at bygge enkeltsidede applikationer, er et af de punkter, vi kan fremhæve dataindtastning, denne type funktionalitet udføres normalt ved brug af en formDet er klart, at hvis vi skal anmode om data fra en bruger, skal vi validere, at de ikke kommer med fejl.
Heldigvis VinkelJS Det har nogle interne mekanismer, der gør det muligt for os at foretage valideringer på en enkel måde, hvilket tillader, at formularen kun sendes, når betingelserne for dataformat er opfyldt.
Den første ting, vi får brug for, er en form, vi skal placere nogle felter, for eksempel navn, efternavn og et e -mail -felt, generelt er det de mest anvendte felttyper, og det vil give os mulighed for at generere valideringer. Lad os se den oprindelige kode, vi har:

Navn:Efternavn:E-mail:Alder:Sende

Hvis vi ser, har vi brugt egenskaber ved HTML for at validere felterne, for eksempel ved at placere ejendommen påkrævet for obligatoriske felter vil de tro, at dette kun fungerer i nyere eller kompatible browsere HTML5 kun, men når vi bruger VinkelJS, vil dette udfylde alternative valideringer, hvis vi åbner applikationen i en browser, der ikke er kompatibel med HTML5.
Vi ser, at aldersfeltet bortset fra typevalidering har to egenskaber af VinkelJS som er for feltets længde, betyder det, at vi kun kan placere tal mellem 1 og 3 cifre i alt.
Indtil videre går vi godt med vores øvelse, men vi skal stadig validere, at for at sende dataene skal alt valideres, for dette skal vi generere en controller, der tillader os at gøre dette, for dette skal vi angive til formularen, som controller vil bruge, til vi kommer til at ændre linjen:

Ved følgende:

Inde i controlleren kan vi få adgang til en ejendom kaldet $ gyldig, som er den, der angiver, om vores formular er gyldig for at kunne sende dataene, for dette skal vi ændre linjen i datasend -knappen med følgende:

Sende

Ændringen skal være som følger:

Sende

Endelig kan vi oprette vores controller i AngularJS, som vi skal behandle vores data med:

 funktion AddControllerUser ($ scope) {$ scope.message = ''; $ scope.addUser = function () {$ scope.message = 'Tak,' + $ scope.user.name + ', det er tilføjet!'; }; } 

Dette skulle give os et resultat som følgende i vores browser:

Vi ser, at da der ikke er nogen data, er send -knappen deaktiveret, dette ændres, når vi udfylder de relevante data, som vi ser i følgende billede:

Hvis vi havde placeret en e -mail med et forkert format, var knappen ikke blevet aktiveret, så ser vi hvordan VinkelJS Det har lettet os for udviklingen i noget så simpelt som en form, og med dette afsluttede vi denne vejledning, vi har været i stand til at validere en formular på en fuldstændig måde, kun ved hjælp af egenskaber for HTML5 Og lidt VinkelJS.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt