AngularJS: ng-maxlength- und ng-minlength-Anweisungen

Was ist die ng-maxlength-Direktive?

Der ng-maxlength Mit der Direktive können wir die maximale Länge für ein Eingabefeld festlegen, dh sie fügt die Einschränkung für ein Eingabefeld hinzu. Die ng-maxlength-Direktive hindert die Benutzer nicht daran, mehr als die begrenzte Anzahl von Zeichen einzugeben. Wenn die maximale Länge für ein Feld erzwungen wird, zählt AngularJS, wie viele Zeichen noch übrig sind.

ng-maxlength-Syntax

Die ng-maxlength-Direktive hat die folgende Syntax:

<input type= "text" ng-maxlength="number"></input>

Wo:
„Zahl“ kann eine beliebige Zahl sein, die die maximale Anzahl von Zeichen für ein Eingabefeld darstellt.

ng-maxlength Beispiel

Das folgende Beispiel zeigt die Verwendung der ng-maxlength-Direktive in AngularJS:
ng-maxlength.html

<!DOCTYPE html>
<html>
<head>
    <title>AngularJs ng-maxlength Directive</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="">





<form name="myForm">


Enter the text in the below field:

<input name="myInput" ng-model="maxlength" ng-maxlength="5">





<h1 ng-if="!myForm.myInput.$valid">The entered value is too long.</h1>





</form>







This example displays error if the entered text is more than 5 characters.

</body>
</html>
  • Im obigen Beispiel definiert ng-app, dass die Anwendung AngularJS ist.
  • Die ng-maxlength-Direktive von anglejs fügt dem ng-model den Validator „maxlength“ hinzu.
  • Im Beispiel ist die maximale Länge auf 5 eingestellt, d. h. es werden bis zu 5 Zeichen in das Eingabefeld eingegeben.
  • Wenn der eingegebene Wert mehr als 5 Zeichen umfasst, wird eine Fehlermeldung angezeigt, da der eingegebene Wert zu lang ist.

Beispielanwendung mit ng-maxlength ausführen

Speichern wir den obigen Code in einer HTML-Datei als ng-maxlength.html im Stammordner des Servers und öffnen Sie diese HTML-Datei in einem Standardbrowser als http://localhost/ng-maxlength.html und Sie erhalten die Ausgabe wie unten angezeigt:

ng-maxlength

Abbildung: ng-maxlength

In der obigen Abbildung beträgt die eingegebene Eingabe 5 Zeichen gemäß dem eingeschränkten maximalen Längenwert.

ng-max_length

Abbildung: ng-maxlength

Wenn wir in der obigen Abbildung mehr als den eingeschränkten Eingabewert eingeben, wird ein Fehler wie gezeigt angezeigt.

Was ist die ng-minlength-Richtlinie?

Die ng-minlength-Direktive legt die Mindestlänge für ein Eingabefeld fest, dh sie fügt die Einschränkung für ein Eingabefeld hinzu. Die ng-minlength-Direktive hindert die Benutzer nicht daran, weniger als die eingeschränkte Anzahl von Zeichen einzugeben. Wenn die Mindestlänge für ein Feld erzwungen wird, zählt AngularJS, wie viele Zeichen noch übrig sind.

ng-init-Syntax

Die ng-minlength-Direktive hat die folgende Syntax:

<input ng-minlength="number"></input>

Wo:
„Zahl“ kann eine beliebige Zahl sein, die die Mindestanzahl an Zeichen für ein Eingabefeld darstellt.

ng-minlength Beispiel

Das folgende Beispiel zeigt die Verwendung der ng-minlength-Direktive in AngularJS:
ng-minlength.html

<!DOCTYPE html>
<html>
<head>
    <title>AngularJs ng-minlength Directive</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="">


<form name="myForm">


Enter the text in the below field:

<input name="myInput" ng-model="minlength" ng-minlength="5">


<h1 ng-if="!myForm.myInput.$valid">The entered value is too short.</h1>


</form>




This example displays error if the entered text is less than 5 characters

</body>
</html>
  • Im obigen Beispiel definiert die ng-app, dass die Anwendung AngularJS ist.
  • Die ng-minlength-Direktive von anglejs fügt dem ng-model den Validator „minlength“ hinzu.
  • Im Beispiel ist die Mindestlänge auf 5 eingestellt, d. h. es sollten mindestens 5 Zeichen in das Eingabefeld eingegeben werden.
  • Wenn der eingegebene Wert weniger als 5 Zeichen umfasst, wird eine Fehlermeldung angezeigt, da der eingegebene Wert zu kurz ist.

Beispielanwendung mit ng-minlength ausführen

Speichern wir den obigen Code in einer HTML-Datei als ng-minlength.html im Stammordner des Servers und öffnen Sie diese HTML-Datei in einem Standardbrowser als http://localhost/ng-minlength.html und Sie erhalten die Ausgabe wie unten angezeigt:

ng-min_length

Abbildung: ng-minlength

In der obigen Abbildung beträgt die eingegebene Eingabe 5 Zeichen gemäß dem eingeschränkten maximalen Längenwert.

ng-minlength

Abbildung: ng-minlength

Wenn wir in der obigen Abbildung eine Eingabe machen, die kleiner als der eingeschränkte Wert ist, wird ein Fehler wie gezeigt angezeigt.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen