codestory

Die Anleitung zu AngularJS Validation

  1. Tổng quan
  2. ng-required
  3. ng-minlength, ng-maxlength
  4. ng-pattern
  5. ng-submitted
  6. ng-messages
  7. Die custom (benutzerdefiniert) Validation

1. Tổng quan

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.
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
$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 == !pristine. true 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 == !touched. true 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

  • Custom AngularJS Validation

Neueste Artikel

Show More