Gegevensinvoer valideren met AngularJS

Wanneer we werken aan het bouwen van applicaties met één pagina, is een van de punten die we kunnen benadrukken de gegevensinvoer, dit type functionaliteit wordt meestal gedaan met behulp van een het formulierHet is duidelijk dat als we gegevens van een gebruiker gaan opvragen, we moeten valideren dat ze geen fouten bevatten.
gelukkig AngularJS Het heeft enkele interne mechanismen waarmee we op een eenvoudige manier validaties kunnen uitvoeren, waardoor het formulier alleen kan worden verzonden als aan de voorwaarden voor gegevensindeling is voldaan.
Het eerste wat we nodig hebben is een het formulier, we gaan enkele velden plaatsen, bijvoorbeeld naam, achternaam en een e-mailveld, over het algemeen zijn dit de meest gebruikte soorten velden en dat geeft ons de mogelijkheid om validaties te genereren. Laten we eens kijken naar de eerste code die we hebben:

Naam:Achternaam:E-mailadres:Leeftijd:Versturen

Als we kijken, hebben we kenmerken van gebruikt HTML om de velden te valideren, bijvoorbeeld door de eigenschap te plaatsen vereist voor verplichte velden zullen ze denken dat dit alleen werkt in nieuwere of compatibele browsers HTML5 alleen, maar wanneer we gebruiken AngularJS, dit vult alternatieve validaties als we de applicatie openen in een browser die niet compatibel is met HTML5.
We zien dat het leeftijdsveld, naast typevalidatie, twee eigenschappen heeft van: AngularJS die voor de lengte van het veld zijn, betekent dit dat we in totaal alleen getallen tussen 1 en 3 cijfers kunnen plaatsen.
Tot nu toe gaan we goed met onze oefening, maar we moeten nog steeds valideren dat om de gegevens te verzenden alles moet worden gevalideerd, hiervoor moeten we een controller genereren die ons in staat stelt dit te doen, hiervoor gaan we aangeven in het formulier dat controller gaat gebruiken, om de regel te veranderen:

Door het volgende:

Binnen de controller hebben we toegang tot een eigenschap genaamd $ geldig, dat is degene die aangeeft of ons formulier geldig is om de gegevens te kunnen verzenden, hiervoor moeten we de regel van de knop voor het verzenden van gegevens wijzigen met het volgende:

Versturen

Het aanbrengen van de wijziging moet als volgt zijn:

Versturen

Eindelijk kunnen we in AngularJS onze verwerkingsverantwoordelijke aanmaken waarmee we onze gegevens gaan verwerken:

 functie AddControllerUser ($ scope) {$ scope.message = ''; $ scope.addUser = function () {$ scope.message = 'Bedankt,' + $ scope.user.name + ', het is toegevoegd!'; }; } 

Dit zou ons een resultaat moeten geven zoals het volgende in onze browser:

We zien dat omdat er geen gegevens zijn, de verzendknop is uitgeschakeld, dit verandert wanneer we de juiste gegevens invullen, zoals we in de volgende afbeelding zien:

Als we een e-mail met een onjuist formaat hadden geplaatst, was de knop niet geactiveerd, dan zien we hoe AngularJS Het heeft ons de ontwikkeling van zoiets eenvoudigs als een formulier vergemakkelijkt en hiermee hebben we deze tutorial voltooid, we hebben een formulier op een volledige manier kunnen valideren, alleen met behulp van eigenschappen van HTML5 En een beetje AngularJS.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven