AngularJS
Formuliervalidatie

Basisformuliervalidatie

Een van de sterke punten van Angular is validatie aan de clientzijde.

Omgaan met traditionele vorminvoer en het gebruik van vragende verwerking in jQuery-stijl kan tijdrovend en lastig zijn. Met Angular kunt u relatief eenvoudig professionele interactieve formulieren maken.

De ng- modelrichtlijn biedt bidirectionele binding met invoervelden en meestal wordt het kenmerk novalidate ook op het formulierelement geplaatst om te voorkomen dat de browser native validatie uitvoert .

Een eenvoudige vorm zou er dus als volgt uitzien:

<form name="form" novalidate>
  <label name="email"> Your email </label>
  <input type="email" name="email" ng-model="email" />
</form>

Voor Angular om invoer te valideren, gebruikt u exact dezelfde syntaxis als een regulier invoerelement , behalve de toevoeging van het attribuut ng-model om aan te geven aan welke variabele het bereik moet binden. E-mail wordt in het vorige voorbeeld getoond. Om een nummer te valideren, zou de syntaxis zijn:

<input type="number" name="postalcode" ng-model="zipcode" />

De laatste stappen voor de basisformuliervalidatie zijn verbinding maken met een formulierverzendfunctie op de controller met behulp van ng-submit , in plaats van de standaard formulierverzending toe te staan. Dit is niet verplicht, maar wordt meestal gebruikt, omdat de invoervariabelen al beschikbaar zijn in het bereik en dus beschikbaar zijn voor uw verzendfunctie. Het is meestal ook een goede gewoonte om het formulier een naam te geven. Deze wijzigingen zouden resulteren in de volgende syntaxis:

<form name="signup_form" ng-submit="submitFunc()" novalidate>
  <label name="email"> Your email </label>
  <input type="email" name="email" ng-model="email" />
  <button type="submit">Signup</button>
</form>

Deze bovenstaande code is functioneel, maar er is andere functionaliteit die Angular biedt.

De volgende stap is om te begrijpen dat Angular klasse-attributen hecht met ng-ongerepte , ng-dirty , ng-valid en ng-invalid voor formulierverwerking. Door deze klassen in uw css te gebruiken, kunt u geldige / ongeldige en ongerepte / vuile invoervelden opmaken en zo de presentatie wijzigen terwijl de gebruiker gegevens in het formulier invoert.

Vorm- en invoertoestanden

Hoekige vormen en invoer hebben verschillende statussen die handig zijn bij het valideren van inhoud

Invoerstaten

Alle bovenstaande statussen zijn booleaanse eigenschappen en kunnen waar of onwaar zijn.

Hiermee is het heel eenvoudig om berichten aan een gebruiker weer te geven.

<form name="myForm" novalidate>
    <input name="myName" ng-model="myName" required>
    <span ng-show="myForm.myName.$touched && myForm.myName.$invalid">This name is invalid</span>
</form>

Hier gebruiken we de ng-show richtlijn om een bericht aan een gebruiker weer te geven als ze een formulier hebben gewijzigd maar het is ongeldig.

CSS-klassen

Angular biedt ook enkele CSS-klassen voor formulieren en invoer, afhankelijk van hun status

U kunt deze klassen gebruiken om stijlen aan uw formulieren toe te voegen

input.ng-invalid {
  background-color: crimson;
}
input.ng-valid {
  background-color: green;
}

ngMessages

ngMessages wordt gebruikt om de stijl voor het weergeven van validatieberichten in de weergave te verbeteren.

Traditionele aanpak

Vóór ngMessages we normaal gesproken de validatieberichten weer met behulp van vooraf gedefinieerde Angular-richtlijnen ng-class Deze aanpak was zwerfafval en een repetitive taak.

Nu kunnen we met ngMessages onze eigen aangepaste berichten maken.

Voorbeeld

Html:

<form name="ngMessagesDemo">
  <input name="firstname" type="text" ng-model="firstname" required>
  <div ng-messages="ngMessagesDemo.firstname.$error">
    <div ng-message="required">Firstname is required.</div>
  </div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-messages.min.js"></script>

JS:

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

app.controller('mainCtrl', function ($scope) { 
    $scope.firstname = "Rohit";
});

Aangepaste formuliervalidatie

In sommige gevallen is basisvalidatie niet voldoende. Angular ondersteunt aangepaste validatie door validatorfuncties toe te voegen aan het $validators object op de ngModelController :

angular.module('app', [])
  .directive('myValidator', function() {
    return {
      // element must have ng-model attribute
      // or $validators does not work
      require: 'ngModel',
      link: function(scope, elm, attrs, ctrl) {
        ctrl.$validators.myValidator = function(modelValue, viewValue) {
            // validate viewValue with your custom logic
            var valid = (viewValue && viewValue.length > 0) || false;
            return valid; 
        };
      } 
    };

De validator is gedefinieerd als een richtlijn die ngModel vereist, dus om de validator toe te passen, voegt u gewoon de aangepaste richtlijn toe aan het invoerformulierbesturingselement.

<form name="form">
  <input type="text" 
         ng-model="model" 
         name="model" 
         my-validator>
  <pre ng-bind="'my-validator returned: ' + form.model.$valid"></pre>
</form> 

En my-validator hoeft niet te worden toegepast op native formulierbesturing. Het kunnen alle elementen zijn, zolang het maar een ng-model in zijn attributen. Dit is handig als u een gebruikerscomponent met aangepaste build hebt.

Geneste formulieren

Soms is het wenselijk om formulieren te nesten met als doel besturingselementen en invoer logisch op de pagina te groeperen. HTML5-formulieren mogen echter niet worden genest. In plaats daarvan levert hoekige ng-form .

<form name="myForm" noValidate>
  <!-- nested form can be referenced via 'myForm.myNestedForm' -->
  <ng-form name="myNestedForm" noValidate>
    <input name="myInput1" ng-minlength="1" ng-model="input1" required />
    <input name="myInput2" ng-minlength="1" ng-model="input2" required />
  </ng-form>

  <!-- show errors for the nested subform here -->
  <div ng-messages="myForm.myNestedForm.$error">
    <!-- note that this will show if either input does not meet the minimum -->
    <div ng-message="minlength">Length is not at least 1</div>
  </div>
</form>

<!-- status of the form -->
<p>Has any field on my form been edited? {{myForm.$dirty}}</p>
<p>Is my nested form valid? {{myForm.myNestedForm.$valid}}</p>
<p>Is myInput1 valid? {{myForm.myNestedForm.myInput1.$valid}}</p>

Elk deel van het formulier draagt bij aan de staat van het algemene formulier. Daarom, als een van de ingangen myInput1 is bewerkt en $dirty , zal de vorm ervan ook $dirty . Deze valt in elke bevattende vorm, dus zowel myNestedForm als myForm zullen $dirty .

Async-validators

Met Asynchrone validators kunt u formulierinformatie valideren tegen uw backend (met $ http).

Dit soort validators is nodig wanneer u om verschillende redenen toegang moet hebben tot opgeslagen serverinformatie die u niet op uw client kunt hebben, zoals de gebruikerstabel en andere database-informatie.

Om async-validators te gebruiken, opent u het ng-model van uw input en definieert u callback-functies voor de eigenschap $asyncValidators .

Voorbeeld:

In het volgende voorbeeld wordt gecontroleerd of een opgegeven naam al bestaat. De backend retourneert een status die de belofte weigert als de naam al bestaat of niet is opgegeven. Als de naam niet bestaat, retourneert deze een opgeloste belofte.

ngModel.$asyncValidators.usernameValidate = function (name) {               
     if (name) {
          return AuthenticationService.checkIfNameExists(name); // returns a promise
     } else {
          return $q.reject("This username is already taken!"); // rejected promise
     }
};

Telkens wanneer het ng-model van de invoer wordt gewijzigd, zal deze functie worden uitgevoerd en een belofte met het resultaat teruggeven.