Die Anleitung zu AngularJS Validation

View more Tutorials:

1- Overview

AngularJS bietet eine Liste der  Directive an. Es hilft Ihnen bei der Bestätigung (validate) der Information, die der Benutzer in die Felder vom  Form eingibt.
Directive Die Bezeichnung
ng-required Das Attribut required (notwendig) für einen Input-Feld setzen.
ng-minlength Das Attribut minlength für einen Input-Feld setzen.
ng-maxlength Das Attribut​​​​​​​  maxlength für einen Input-Feld setzen. Bei der Setzung der Wert für dieses Attribut in Höhe von einer negativen Zahl oder nichtnumerisch Erlaubt sie dem Benutzer, die Inhalt in irgendeiner Länge einzugeben.
ng-pattern Ein reguläre Ausdruck (regular Expression) setzen , der Benutzer gibt die Inhalt, die der Ausdruck entsprechen muss, ein
Property Die Bezeichnung
$pristine (Der primitive Status) true zurückgeben wenn der Benutzer mit diesem control nocht nicht interaktiviert . (ihn nocht nicht berührt oder berührt aber noch nicht ändert), umgekehrt false zurückgeben.
$dirty Der negative Status vom $pristine. Es ist genau, $dirty == !pristinetrue zurückgeben wenn der Benutzer die Wert vom control mindesten einmal ändert.
$touched true zurückgeben wenn der Benutzer diesen control jemal berührt und je mindesten einmal abmeldet. ( mindesten einmal focus verlieren)
$untouched Der negative Status vom $touched. Es ist genau, $untouched == !touchedtrue zurückgeben wenn der Benutzer diesen control niemal berührt oder berührt aber niemal abmeldet . ( focus niemal verlieren)

$error Ein Objekt $error enthaltet alle Attribute von Validierung (validation attributes), die für ein bestimmtes Element angewendet werden.
$valid true zurückgeben wenn die Inhalt gültig ist
$invalid true zurückgeben wenn die Inhalt nicht gültig ist.

$pristine

Das Element control hat den Status vom  $pristine = true (primitiver Status) wenn der Benutzer niemal ihn berührt oder berührt aber noch nicht ändert. Umgekehrt   $pristine = false.

$dirty

$dirty ist der Negativ vom  $pristine, oder genau  $dirty == !$pristine. Das Element  control hat den Status vom $dirty = true wenn der Benutzer es mindesten einmal ändert. Umgekehrt ist der Status   $dirty = false.

$touched & $untouched

Ein  Control hat den Status vom  $untouched wenn der Benutzer es nicht berührt oder schon mal berührt aber nie mal abmelden ( focus nie mal verliert).
Umgekehrt hat  control den Status von  $touched wenn der Benutzer schon mal berührt und mindesten einmal abmeldet ( focus mindesten einmal verliert).

2- ng-required

ng-required ist ein Attribut, das für einen Input-Feld von der  Form anwendet, dass den Benutzer die Inhalt für diesen Feld einzugeben auffordert.
<input ng-model="something" ng-required="true" />

<input ng-model="something" ng-required="someLogicExpression" />
Unter ist ein einfaches Beispiel für die Verwendung von  ng-required. Die Fehleranmeldung wird angezeigt wenn der Input-Feld keine Inhalt hat.
ng-required-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>AngularJS Validation - ng-required</title>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
      <script src="ng-required-example.js"></script>
      <style>
         .error-msg {
         font-size: 90%;
         font-style: italic;
         color: red;
         }
      </style>
   </head>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         <h3>Validation Directive: ng-required</h3>
         <p>Enter Your Name:</p>

         <form name="myForm">
            Full Name <br/>
            <input type="text"
               name="myFullName" ng-model="fullName" ng-required ="true" />
            <span ng-show="myForm.myFullName.$invalid" class="error-msg">
            You must enter your Name.
            </span>
         </form>
      </div>
   </body>
</html>
ng-required-example.js
var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {

    $scope.fullName = "";

});

Example 2:

Ein anderes Beispiel mit  ng-required. Ein  checkbox wird entscheiden, ob der Benutzer die Daten in einen Feld eingeben soll oder nicht.
ng-required-example2.html
<!DOCTYPE html>
<html>
   <head>
      <title>AngularJS Validation - ng-required</title>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
      <script src="ng-required-example2.js"></script>
      <style>
         .error-msg {
         font-size: 90%;
         font-style: italic;
         color: red;
         }
      </style>
   </head>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         <h3>Validation Directive: ng-required</h3>
         <p>Enter User Name:</p>
         <form name="myForm">
            <input type="checkbox" ng-model="autoName" /> Auto Name?
            <br/>
            User Name
            <br/>
            <input type="text"
               name="myUserName" ng-model="userName" ng-required ="!autoName" />
            <span ng-show="myForm.myUserName.$invalid" class="error-msg">
            Please Enter User Name.
            </span>
         </form>
      </div>
   </body>
</html>
ng-required-example2.js
var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {

    $scope.autoName = false;
    $scope.userName = "";

});

3- ng-minlength, ng-maxlength

ng-minlength ist ein Attribut, das für einen Input-Feld von  Form zur Festlegung der minimalen Anzahl der Zeichen, die der Benutzer in den Feld eingibt, angewendet wird. Zum Beispiel  ng-minlength = "3" heißt, dass der Benutzer mindesten 3 Zeichen in diesen Feld eingeben müssen. Inzwischen bestimmt  ng-maxlength die maximale Anzahl der Zeichen, die der Benutzer in einen Feld eingeben darf.
minmax-length-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>AngularJS Validation</title>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
      <script src="minmax-length-example.js"></script>
      <style>
         .error-msg {
         font-size: 90%;
         font-style: italic;
         color: red;
         }
      </style>
   </head>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         <h3>Validation Directive: ng-minlength, ng-maxlength</h3>
         <p>Enter Password:</p>

         <form name="myForm" action="" ng-submit="checkOnSubmit($event)">
            Password <br/>
            <input type="password"
               name="myPassword" ng-model="password"
               ng-minlength= "5" ng-maxlength= "10" ng-required="true"/>
               
            <span ng-show="myForm.myPassword.$invalid" class="error-msg">
                 Password must be minimum 5 and maximum 10 characters
            </span>
            <br/>
            <button type="submit" >Submit</button>
         </form>
      </div>
   </body>
</html>
minmax-length-example.js
var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {

    $scope.password = "";

    // Show more error infos.
    function printErrorInfo() {
        console.log($scope.myForm.$error);
        if ($scope.myForm.$error.minlength) {
            console.log('$error.minlength? ' + $scope.myForm.$error.minlength[0].$invalid);
        }
        if ($scope.myForm.$error.maxlength) {
            console.log('$error.maxlength? ' + $scope.myForm.$error.maxlength[0].$invalid);
        }
    }

    $scope.checkOnSubmit = function(event) {
        if ($scope.myForm.$invalid) {
            alert("Something invalid!");

            printErrorInfo();

            // Cancel submit
            event.preventDefault();
            return false;
        }
        alert("All valid => Submit now!");
        return true;
    }

});

4- ng-pattern

ng-pattern definiert ein Muster (pattern) um sicherzustellen, dass die in Form durch den Benutzer eingegebenen Inhalt diesem Muster entsprechen muss. Die Wert vom ng-pattern ist ein regulärer Ausdruck  (Regular expression).
ng-pattern-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>AngularJS Validation ng-pattern</title>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
      <script src="minmax-length-example.js"></script>
      <style>
         .error-msg {
         font-size: 90%;
         font-style: italic;
         color: red;
         }
      </style>
   </head>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         <h3>Validation Directive: ng-pattern</h3>

         <p>Enter Pin Code:</p>

         <form name="myForm" action="" ng-submit="checkOnSubmit($event)">
            Pin Code:<br/>
            <!-- Only Numbers Allowed, Maximum 5 Characters -->
            <input type="text" name="myPinCode" ng-model="pinCode" ng-pattern="/^[0-9]{1,5}$/" ng-required="true" />
            <span class="error-msg" ng-show="myForm.myPinCode.$error.required">Required!</span>
            <span class="error-msg" ng-show="myForm.myPinCode.$dirty && myForm.myPinCode.$error.pattern">
            Only Numbers Allowed, Maximum 5 Characters
            </span>
            <br/>
            <button type="submit" >Submit</button>
         </form>
      </div>
   </body>
</html>
ng-pattern-example.js
var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {

    $scope.pinCode = "";

    // Show more error infos.
    function printErrorInfo() {
        console.log($scope.myForm.$error);
    }

    $scope.checkOnSubmit = function(event) {
        if ($scope.myForm.$invalid) {
            alert("Something invalid!");

            printErrorInfo();

            // Cancel submit
            event.preventDefault();
            return false;
        }
        alert("All valid => Submit now!");
        return true;
    }

});

5- ng-submitted

AngularJS 1.3 stellt auch ein neues  property für  Form vor. Das ist  $submitted um  Form anzuzeigen, ob sie eingereicht wird oder nicht  ( submit )
<div ng-if="myForm.$submitted">

    <!-- show errors -->

</div>
ng-submitted-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>AngularJS Validation $sumitted</title>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
      <script src="$submitted-example.js"></script>
      <style>
         .error-msg {
         font-size: 90%;
         font-style: italic;
         color: red;
         }
      </style>
   </head>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         <h3>$sumitted</h3>
         <p><a href="?refresh">Reset</a></p>
         <p style="color:blue;">Click Submit button to test $sumitted</p>
         <h3 style= "color:red;">$submitted = {{myForm.$submitted}}</h3>
         <!--
            (IMPOTANT!!) To test with $submitted
            You need to remove the action attribute in the FORM.

            novalidate: Disable browser default validation.
            -->
         <form name="myForm" ng-submit="myForm.$valid && doSubmitForm($event)" novalidate>
            <input type="text" name="myField1" ng-model="field1" ng-required="true"/>
            <span ng-show="myForm.myField1.$invalid" class="error-msg">Required!!</span>
            <br/>
            <button type="submit">Submit</button>
            <h4 ng-show="myForm.$submitted && myForm.$invalid" class="error-msg">
               Something invalid, please check and re-submit
            </h4>
         </form>
      </div>
   </body>
</html>
 
ng-submitted-example.js
var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {

    $scope.field1 = "";

    $scope.doSubmitForm = function(event) {
        alert("OK: " + $scope.myForm.$submitted);
        // Code to Submit form!
    }

});

6- ng-messages

Die Validierung von   Form ist immer eine komplizierte und schwer-zu-verstehen Aufgabe im  AngularJS. So stellt  AngularJS 1.3 einige Verbesserungen vor, davon 2 mehre  Directive: ngMessages & ngMessage.
Wenn ein  control in vielen Aspekte validieren braucht, sollen Sie vielen Fehleranmeldungen, die jedem Aspekt entspricht, einstellen. Im Grunde sieht Ihre Kode so gleich wie folgend aus und es geht zum Schluss , dass es ziemlich lang und unfreundlich ist
<div>
    <div ng-if="myForm.myFieldName.$error.required">Required Message</div>
    <div ng-if="myForm.myFieldName.$error.minlength">Min length Error Message</div>
    <div ng-if="myForm.myFieldName.$error.customValidator">Custom Error Message</div>
    <div ng-if="myForm.myFieldName.$error.asyncValidator">Custom Async Error Message</div>
    <div ng-if="myForm.myFieldName.$pending">Fetching Data...</div>
</div>

<!-- Or -->


<div>
    <div ng-show="myForm.myFieldName.$error.required">Required Message</div>
    <div ng-show="myForm.myFieldName.$error.minlength">Min length Error Message</div>
    <div ng-show="myForm.myFieldName.$error.customValidator">Custom Error Message</div>
    <div ng-show="myForm.myFieldName.$error.asyncValidator">Custom Async Error Message</div>
    <div ng-show="myForm.myFieldName.$pending">Fetching Data...</div>
</div>
Die beste Maßnahme ist die Verwendung von  ng-messages & ng-message:
<div ng-messages="myForm.myFieldName.$error">
    <div ng-message="required">Required Message</div>
    <div ng-message="minlength">Min length Error Message</div>
    <div ng-message="customValidator">Custom Error Message</div>
    <div ng-message="asyncValidator">Custom Async Error Message</div>
    <div ng-message-default="asyncValidator">Some thing error</div>
</div>

<div ng-if="myForm.myFieldName.$pending">Fetching Data...</div>
 
Die generalen Gebrauchweise
Usage
<!-- Using attribute directives -->
<!-- ng-messages-multiple: Optional attribute -->
<ANY ng-messages="expression" role="alert" [ng-messages-multiple]>
  <ANY ng-message="stringValue">...</ANY>
  <ANY ng-message="stringValue1, stringValue2, ...">...</ANY>
  <ANY ng-message-exp="expressionValue">...</ANY>
  <ANY ng-message-default>...</ANY>
</ANY>

<!-- Or by using element directives -->
<!-- multiple: Optional attribute -->
<ng-messages for="expression" role="alert" [multiple]>
  <ng-message when="stringValue">...</ng-message>
  <ng-message when="stringValue1, stringValue2, ...">...</ng-message>
  <ng-message when-exp="expressionValue">...</ng-message>
  <ng-message-default>...</ng-message-default>
</ng-messages>
Achtung: Um  ngMessages zu verwenden, sollen Sie die Bibliothek  angular-messages.js haben:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-messages.js"></script>

<!-- Example: -->

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-messages.js"></script>
Und das Modul  "ngMessages" in Ihre  Apps importieren.
// Import ngMessages module to your App.
var app = angular.module("myApp", ["ngMessages"] );
ng-messages-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>AngularJS Validation</title>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
      <!-- angular-messsages.js Library -->
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-messages.js"></script>
      <script src="ng-messages-example.js"></script>
      <style>
         .error-msg {
          font-size: 90%;
          font-style: italic;
          color: red;
         }
      </style>
   </head>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         <h3>Validation Directive: ng-messages, ng-message</h3>
         <p>Enter Password:</p>
         <form name="myForm" action="" ng-submit="checkOnSubmit($event)">
            Password <br/>
            <input type="password"
               name="myPassword" ng-model="password"
               ng-minlength= "5" ng-maxlength= "10" ng-required="true"/>

            <div ng-messages="myForm.myPassword.$error" ng-messages-multiple class="error-msg">
               <div ng-message="required">Required!</div>
               <div ng-message="minlength">Min length 5 characters</div>
               <div ng-message="maxlength">Max length 10 characters</div>
               <div ng-message="customValidator">Custom Error Message</div>
               <div ng-message="asyncValidator">Custom Async Error Message</div>
            </div>

            <br/>
            <button type="submit" >Submit</button>
         </form>
      </div>
   </body>
</html>
ng-messages-example.js
// Import ngMessages module to your App.
var app = angular.module("myApp", ["ngMessages"] );

app.controller("myCtrl", function($scope) {

    $scope.password = "";

    $scope.checkOnSubmit = function(event) {
        if ($scope.myForm.$invalid) {
            alert("Something invalid!");
            // Cancel submit
            event.preventDefault();
            return false;
        }
        alert("All valid => Submit now!");
        return true;
    }

});

7- Die custom (benutzerdefiniert) Validation

  • TODO Link!

View more Tutorials: