Validatiemeldingen tonen met AngularJS

Geplaats op 22 februari 2018 | Leestijd: 3 minuten

Vaak krijg ik de vraag hoe het toch komt dat AngularJS velden valideert en foutmeldingen toont voordat een gebruiker iets heeft ingevuld in het webformulier. AngularJS blinkt juist uit in het opzetten van formulieren en het zou dus gemakkelijk moeten zijn om dat aan te passen. Gelukkig is dat zo, maar je zal wel de basis werking van AngularJS formulieren moeten begrijpen.

States van een AngularJS formulier

Elk formulier van AngularJS houdt bepaalde states bij. Deze states worden bepaald voor het formulier zelf en voor elk veld binnen het formulier (input, textarea, select). AngularJS houdt bij of het veld is aangeraakt (touched), aangepast (modified) of niets is gebeurd.

Elk veld in een formulier kent de volgende states:

• $untouched
• $touched
• $pristine
• $dirty
• $invalid
• $valid

Het formulier kent de volgende states:

• $pristine
• $dirty
• $invalid
• $valid
• $submitted

Deze states zijn niet complex en kunnen alleen true of false zijn. Elke state is altijd aanwezig. Het is mogelijk dat een veld of het formulier meerdere states heeft die true of false zijn.

Gebruiken van states

Door slim gebruik te maken van de states van velden of het formulier kun je foutmeldingen tonen nadat een state is veranderd. Bijvoorbeeld als de gebruiker het formulier heeft ge-submit of als een veld is aangepast. De states van een veld of het formulier zijn uit te lezen met code in een component of in een template. In het voorbeeld hieronder staat twee keer dezelfde code. Het eerste voorbeeld toont een foutmelding die direct zichtbaar is, het tweede voorbeeld toont een foutmelding nadat een gebruiker een veld heeft aangepast.

<form name="myForm">
  <label>
    Enter your name:
    <input type="text"
           name="myName"
           ng-model="name"
           required />
  </label>
  <div ng-messages="myForm.myName.$error">
    <div ng-message="required">You did not enter a field</div>
  </div>
</form>

<form name="myForm">
  <label>
    Enter your name:
    <input type="text"
           name="myName"
           ng-model="name"
           required />
  </label>
  <div ng-messages="myForm.myName.$error" ng-if="myForm.myName.$dirty">
    <div ng-message="required">You did not enter a field</div>
  </div>
</form>

De controle of een gebruiker een veld heeft aangepast wordt gedaan door de state van het veld te controleren of $dirty. Deze state houdt bij of de gebruiker het veld heeft aangeraakt en heeft aangepast. De controle wordt in de template toegepast met een ng-if, maar je zou ook een ng-show kunnen gebruiken. Het is mogelijk om een combinatie van states te gebruiken om een validatie-fout wel of niet te tonen. Bijvoorbeeld als een formulier de state $submitted heeft en een veld de state $dirty.