AngularJS
Formularüberprüfung

Grundlegende Formularvalidierung

Eine der Stärken von Angular ist die clientseitige Formularvalidierung.

Der Umgang mit herkömmlichen Formulareingaben und die Verwendung von abfragender jQuery-Verarbeitung ist zeitaufwändig und umständlich. Mit Angular können Sie relativ einfach professionelle interaktive Formulare erstellen.

Die ng-model- Direktive bietet eine bidirektionale Bindung mit Eingabefeldern. Normalerweise wird das Attribut novalidate auch im Formularelement platziert, um zu verhindern, dass der Browser die native Überprüfung durchführt.

Ein einfaches Formular würde also so aussehen:

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

Verwenden Sie für die Überprüfung der Eingaben von Angular genau die gleiche Syntax wie ein reguläres Eingabeelement , mit Ausnahme des Zusatzes ng-model , um anzugeben, an welche Variable im Bereich gebunden werden soll. E-Mail wird im vorherigen Beispiel gezeigt. Um eine Zahl zu bestätigen, würde die Syntax lauten:

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

Die letzten Schritte zur grundlegenden Formularüberprüfung bestehen darin, eine Verbindung zu einer Formularübergabefunktion auf dem Controller mithilfe von ng-submit herzustellen, anstatt das Standardformular absenden zuzulassen. Dies ist nicht obligatorisch, wird jedoch in der Regel verwendet, da die Eingabevariablen bereits im Gültigkeitsbereich vorhanden sind und somit Ihrer Übermittlungsfunktion zur Verfügung stehen. In der Regel empfiehlt es sich, der Form einen Namen zu geben. Diese Änderungen würden zu folgender Syntax führen:

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

Der obige Code ist funktionsfähig, aber es gibt andere Funktionen, die Angular bietet.

Der nächste Schritt besteht darin, zu verstehen, dass Angular Klassenattribute mit ng-pristine , ng-dirty , ng-valid und ng-invalid für die Formularverarbeitung anfügt. Wenn Sie diese Klassen in Ihrer CSS-Datei verwenden, können Sie gültige / ungültige und unverfälschte / fehlerhafte Eingabefelder formatieren und so die Präsentation ändern, wenn der Benutzer Daten in das Formular eingibt.

Form- und Eingabezustände

Winkelformen und Eingaben weisen verschiedene Status auf, die bei der Überprüfung von Inhalten hilfreich sind

Eingabezustände

Alle oben genannten Zustände sind boolesche Eigenschaften und können entweder wahr oder falsch sein.

Mit diesen ist es sehr einfach, einem Benutzer Nachrichten anzuzeigen.

<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 verwenden wir die Anweisung ng-show , um einem Benutzer eine Nachricht anzuzeigen, wenn er ein Formular geändert hat, das aber ungültig ist.

CSS-Klassen

Angular stellt abhängig vom Status auch einige CSS-Klassen für Formulare und Eingaben bereit

Sie können diese Klassen verwenden, um Ihren Formularen Formatvorlagen hinzuzufügen

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

ngNachrichten

ngMessages wird verwendet, um den Stil für die Anzeige von Überprüfungsmeldungen in der Ansicht zu verbessern.

Traditioneller Ansatz

Vor ngMessages wir die Validierungsnachrichten normalerweise mit vordefinierten Anweisungen von Angular ng-class Dieser Ansatz war Wurf und eine sich repetitive Aufgabe.

Mit ngMessages wir jetzt eigene benutzerdefinierte Nachrichten erstellen.

Beispiel

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

Benutzerdefinierte Formularüberprüfung

In einigen Fällen reicht die grundlegende Validierung nicht aus. Angular unterstützt die benutzerdefinierte Validierung, um dem $validators ngModelController Objekt auf dem ngModelController $validators 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; 
        };
      } 
    };

Der Validator ist als eine Direktive definiert, für die ngModel erforderlich ist. ngModel den Validator anwenden ngModel , fügen Sie einfach die benutzerdefinierte Direktive zum Eingabeformularsteuerelement hinzu.

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

Und my-validator muss nicht auf die native Formularsteuerung angewendet werden. Es kann ein beliebiges Element sein, solange es in seinen Attributen ein ng-model . Dies ist nützlich, wenn Sie über eine benutzerdefinierte UI-Komponente verfügen.

Verschachtelte Formulare

Manchmal ist es wünschenswert, Formulare zu verschachteln, um Steuerelemente und Eingaben logisch auf der Seite zu gruppieren. HTML5-Formulare sollten jedoch nicht geschachtelt werden. Winkel liefert stattdessen 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>

Jeder Teil des Formulars trägt zum Gesamtzustand des Formulars bei. Wenn also einer der Eingaben myInput1 bearbeitet wurde und $dirty , ist das enthaltene Formular ebenfalls $dirty . myNestedForm dies zu jedem Formular führt, werden sowohl myNestedForm als auch myForm $dirty .

Async-Validatoren

Mit asynchronen Validatoren können Sie Formularinformationen gegen Ihr Backend überprüfen (mithilfe von $ http).

Diese Art von Validatoren wird benötigt, wenn Sie auf vom Server gespeicherte Informationen zugreifen müssen, die Sie aus verschiedenen Gründen nicht auf Ihrem Client haben können, z.

Um async-Validatoren zu verwenden, greifen Sie auf das ng-model Ihrer input und definieren Callback-Funktionen für die $asyncValidators Eigenschaft.

Beispiel:

Im folgenden Beispiel wird geprüft, ob ein angegebener Name bereits vorhanden ist. Das Backend gibt einen Status zurück, der das Versprechen ablehnt, wenn der Name bereits existiert oder nicht angegeben wurde. Wenn der Name nicht existiert, wird ein gelöstes Versprechen zurückgegeben.

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

Bei jeder Änderung des ng-model der Eingabe wird diese Funktion ausgeführt und ein Versprechen mit dem Ergebnis zurückgegeben.