AngularJS
Formvalidering

Grundläggande formulärvalidering

En av Angular styrka är validering av klientsidan.

Att hantera traditionella inmatningar och att behöva använda förhörande jQuery-bearbetning kan vara tidskrävande och fin. Angular låter dig producera professionella interaktiva former relativt enkelt.

Direktivet ng-modell ger tvåvägsbindning med inmatningsfält och vanligtvis placeras attributet novalidat också på formelementet för att förhindra att webbläsaren gör en ursprunglig validering.

Således skulle en enkel form se ut:

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

För att Angular ska validera ingångar, använder du exakt samma syntax som ett vanligt inmatningselement , förutom tillägget av ng- modellattributet för att ange vilken variabel som ska bindas till omfånget. E-post visas i föregående exempel. För att validera ett nummer skulle syntaxen vara:

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

De sista stegen till grundläggande formulärvalidering är att ansluta till en formulär skicka funktion på styrenheten med ng-skicka , snarare än att låta standardformuläret skicka att ske. Detta är inte obligatoriskt men det används vanligtvis, eftersom inmatningsvariablerna redan finns tillgängliga inom ramen och så tillgängliga för din skicka-funktion. Det är också vanligtvis god praxis att ge formen ett namn. Dessa ändringar skulle resultera i följande syntax:

<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>

Denna kod ovan är funktionell men det finns annan funktionalitet som Angular tillhandahåller.

Nästa steg är att förstå att Angular bifogar klassattribut med ng-orörda , ng-smutsiga , ng-giltiga och ng-ogiltiga för formulärbehandling. Om du använder dessa klasser i din css kan du utforma giltiga / ogiltiga och orörda inmatningsfält och så ändra presentationen när användaren skriver in data i formuläret.

Form och inmatningsländer

Vinkelformer och ingångar har olika tillstånd som är användbara vid validering av innehåll

Inmatningsländer

Alla ovanstående tillstånd är booleska egenskaper och kan vara antingen sanna eller falska.

Med dessa är det mycket enkelt att visa meddelanden till en användare.

<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>

Här använder vi ng-show direktivet för att visa ett meddelande till en användare om de har ändrat ett formulär men det är ogiltigt.

CSS-klasser

Angular tillhandahåller också vissa CSS-klasser för formulär och ingångar beroende på deras tillstånd

Du kan använda dessa klasser för att lägga till stilar i dina formulär

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

ngMessages

ngMessages används för att förbättra stilen för att visa valideringsmeddelanden i vyn.

Traditionell strategi

Innan ngMessages vi normalt valideringsmeddelanden med hjälp av vinkelfördefinierade direktiv ng-class Denna strategi var kull och en repetitive uppgift.

ngMessages använda ngMessages vi skapa egna egna meddelanden.

Exempel

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";
});

Anpassad formvalidering

I vissa fall räcker inte grundvalidering. Angular support anpassad validering lägger till valideringsfunktioner i $validators objektet på 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; 
        };
      } 
    };

Validatorn definieras som ett direktiv som kräver ngModel , så för att tillämpa valideraren lägger du bara till det anpassade direktivet till ingångsformulärkontrollen.

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

Och my-validator behöver inte tillämpas på infödingskontroll. Det kan vara valfritt element, så länge det är som ng-model i dess attribut. Detta är användbart när du har en anpassad bygg ui-komponent.

Kapslade formulär

Ibland är det önskvärt att häcka formulär i syfte att gruppera kontroller och ingångar logiskt på sidan. HTML5-formulär bör dock inte kapslas. Angular levererar i stället 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>

Varje del av formen bidrar till den övergripande formens tillstånd. Därför, om en av ingångarna myInput1 har redigerats och är $dirty , kommer dess innehållsform också att vara $dirty . Denna kaskader till varje som innehåller form, så både myNestedForm och myForm kommer att vara $dirty .

Async-validerare

Med asynkrona validerare kan du validera formulärinformation mot din backend (med $ http).

Denna typ av validerare behövs när du behöver åtkomst till serverlagrad information som du inte kan ha om din klient av olika skäl, till exempel användartabellen och annan databasinformation.

För att använda async-validerare, öppnar du ng-model för din input och definierar återuppringningsfunktioner för egenskapen $asyncValidators .

Exempel:

Följande exempel kontrollerar om ett angivet namn redan finns, backend kommer att returnera en status som kommer att avvisa löfte om namnet redan finns eller om det inte gick. Om namnet inte finns kommer det att lösa ett löst löft.

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
     }
};

Nu varje gång ng-model för ingången ändras, kommer denna funktion att köras och ger ett löfte med resultatet.