AngularJS formuliervalidatie met ngMessages

Bijna elke website gebruikt formulieren om verschillende taken uit te voeren, zoals het aanmelden van gebruikers of het verkrijgen van hun contactgegevens. Het is erg belangrijk om ervoor te zorgen dat een gebruiker die het formulier invult, ten minste geldige informatie invoert in de invoervelden.

Het is ook noodzakelijk om een gedetailleerd foutbericht te tonen aan de gebruikers, zodat ze het formulier correct kunnen invullen. Dit proces kan erg ingewikkeld worden als je te maken hebt met veel formulierelementen, die elk hun eigen aangepaste foutmeldingen nodig hebben. Om de pijn te verzachten, heeft Angular 1.3 een nieuwe module toegevoegd met de naam ngMessages om ontwikkelaars te helpen bij het valideren van formulieren met gemak.

De module ngMessages biedt u de mogelijkheid om aangepaste foutmeldingen weer te geven aan uw gebruikers zonder herhalende code te hoeven schrijven. In deze zelfstudie leert u hoe u deze module kunt gebruiken om uw formulieren te valideren. U leert ook hoe u de foutmeldingen extern kunt laden en alleen de berichten kunt weergeven wanneer deze daadwerkelijk nodig zijn.

Een eenvoudig voorbeeld

Laten we beginnen met het valideren van een enkel invoerveld met en zonder de hulp van ngMessages om het nut van deze module te zien. Zonder ngMessages te gebruiken, zal de opmaak voor het invoerelement er ongeveer zo uitzien als de volgende code:

 Gebruikersnaam  Gebruikersnaam moet minimaal 6 tekens bevatten.
 Gebruikersnaam moet maximaal 12 tekens bevatten.
 Het opgeven van een gebruikersnaam is verplicht.

Je hebt ook de volgende JavaScript-code nodig:

angular.module ('app', []);

Alle andere formulierelementen moeten op dezelfde manier worden gevalideerd. Hierdoor wordt de opmaak erg repetitief, waardoor de kans op fouten groter wordt. Als u besloot ngMessages te gebruiken om dezelfde formulierinvoer te valideren, zou de opmaak er ongeveer zo uitzien als de volgende code:

 Gebruikersnaam   Gebruikersnaam moet minimaal 6 tekens bevatten.
 Gebruikersnaam moet maximaal 12 tekens bevatten.
 Het opgeven van een gebruikersnaam is verplicht.

De JavaScript-code wordt nu:

angular.module ('app', ['ngMessages']);

Hier hebben we de ng-berichten richtlijn om de foutmeldingen samen te groeperen. De waarde die is doorgegeven aan de ng-berichten richtlijn volgt het patroon formName.inputName. $ error. In ons geval evalueert dit naar formValidation.username. $ error.

Op dezelfde manier zou je ook de waarde van de kunnen krijgen ng-berichten richtlijn voor alle andere velden. ngMessages vertrouwt op de $ error object dat wordt weergegeven door de opdracht ngModel om te bepalen of foutberichten op de webpagina moeten worden weergegeven of verborgen. Het loopt door de $ error object zoekt naar een sleutel die overeenkomt met de waarden van een van de ng-bericht richtlijnen.

Hier is een werkend voorbeeld dat de bovenstaande validatiecode in actie toont:

Een formulier valideren

In dit gedeelte valideren we een formulier met een gebruikersnaam, wachtwoord en een e-mailveld. De opmaak voor het formulier ziet er ongeveer als volgt uit:

 Gebruikersnaam   Gebruikersnaam moet minimaal 6 tekens bevatten.
 Gebruikersnaam moet maximaal 12 tekens bevatten.
 Het opgeven van een gebruikersnaam is verplicht.
 Gebruikersnaam kan alleen alfanumeriek zijn met een optioneel onderstrepingsteken.
 
 Wachtwoord   Wachtwoord moet minimaal 6 tekens bevatten.
 Wachtwoord mag maximaal 12 tekens bevatten.
 Het opgeven van een wachtwoord is verplicht.
 
 E-mail   Vul een geldig e-mailadres in.
 Het opgeven van een e-mail is verplicht.

Zoals u ziet, is de opmaak die vereist is voor het valideren van verschillende formulierelementen erg vergelijkbaar. Een belangrijke verandering in dit geval is de toevoeging van de ng-pattern richtlijn. Het patroon dat we hier gebruiken, zorgt ervoor dat de ingevoerde gebruikersnaam alleen alfanumerieke tekens en een onderstrepingsteken heeft. De \ w in / ^ \ W + $ / staat voor woordtekens zoals A-Z, a-z, 0-9 en _.

Probeer een andere gebruikersnaam te typen in het veld gebruikersnaam. Na enige tijd zult u merken dat het formulier niet klagen over een teken dat niet alfanumeriek is als het werd getypt voor de eerste zes tekens of na de eerste 12 tekens. Dit gedrag is niet erg gebruiksvriendelijk.

Laten we bijvoorbeeld zeggen dat sommige van uw gebruikers hun gebruikersnaam beginnen met een uitroepteken. Ze zullen moeten wachten tot ze zes extra tekens hebben getypt om de fout te krijgen dat alleen alfanumerieke tekens worden gebruikt. Het zal voor hen erg frustrerend zijn om de gebruikersnaam opnieuw te typen vanaf het begin.

NgMessages toont standaard slechts één fout tegelijk voor de gebruiker. Daarom kon het bericht over ongeldige tekens niet worden weergegeven voordat een gebruiker meer dan zes tekens had getypt. Bovendien gebruikt ngMessages de volgorde waarin u de foutmeldingen hebt ingevoerd als een hint om hun prioriteit te bepalen.

Als u het minimale teken hebt opgegeven vóór de alfanumerieke fout, wacht ngMessages totdat de minimumkarakterfout is opgelost voordat de alfanumerieke fout wordt weergegeven.

Hier is hetzelfde formulier met de foutmeldingen in een andere volgorde.

U kunt ook alle toepasselijke foutmeldingen tegelijk aan een gebruiker tonen met behulp van de ng-berichten-multiple. Als u echter meerdere foutmeldingen ziet zodra gebruikers in een invoerveld beginnen te typen, kunnen ze overweldigd raken.

Foutmeldingen opnieuw gebruiken

Er zit nog steeds veel herhaling in onze opmaak. Als u dezelfde foutmelding voor verschillende invoervelden wilt weergeven, is het niet logisch om deze voor elk van deze velden te herhalen. Met de module ngMessages kunt u generieke foutberichten slechts één keer schrijven en deze in uw formulier opnemen wanneer dat nodig is. Hier is de opmaak om een formulier te maken dat algemene foutmeldingen voor de gebruikers weergeeft.

  Gebruikersnaam   Gebruikersnaam kan alleen alfanumeriek zijn met een optioneel onderstrepingsteken.
 Gebruikersnaam kan niet langer zijn dan 12 tekens.
 
 
 Wachtwoord   
 
 E-mail   dit veld is verplicht.
 Vul een geldig e-mailadres in.

Net als in het vorige geval wordt de prioriteit van een bericht bepaald door de plaats in de sjabloon. U kunt ook de algemene berichten in de sjabloon overschrijven door een aangepast foutbericht in afzonderlijke velden op te nemen. De foutmeldingen kunnen ook vanuit een apart bestand worden geladen met behulp van de volgende code:

Alleen fouten weergeven indien nodig

U kunt uw formulier gebruiksvriendelijker maken door alleen foutmeldingen weer te geven wanneer een gebruiker daadwerkelijk een fout heeft gemaakt bij het invullen van de formulieren. U kunt er bijvoorbeeld voor kiezen om alleen de vereiste veldfout weer te geven wanneer een gebruiker daadwerkelijk een invoerelement overslaat.

Dit kan worden bereikt door de ng-voorstelling of ng-if richtlijn samen met $ aangeraakt en $ dirty. In het geval van $ aangeraakt, het foutbericht wordt weergegeven zodra de invoer de focus verliest. In het geval van $ dirty, de foutmelding verschijnt zodra de invoer ongeldig wordt.

Hier is de demo die het verschil toont tussen $ aangeraakt en $ dirty.

Conclusie

In deze zelfstudie hebt u geleerd hoe eenvoudig het is om de invoer van verschillende soorten formulierelementen met ngMessages te valideren. Je hebt ook geleerd hoe je dezelfde foutmeldingen meerdere keren kunt hergebruiken om herhaling te voorkomen en verschillende foutmeldingen te prioriteren.

U kunt ook zowel ngMessages als ngAnimate samen gebruiken om aangepaste animaties te gebruiken om uw foutmelding weer te geven of te verbergen. Een tutorial over het gebruik van de ngAnimate-module zal binnenkort ook op Envato Tuts + worden gepubliceerd.

Als er tips zijn die je wilt delen met collega-lezers of als er een vraag is die je zou willen stellen, laat het me weten in de reacties.

Code