Benutzerdefinierte Formularvalidierung in AngularJS hinzufügen

  2. How-To's
  3. Angular Howtos
  4. Benutzerdefinierte Formularvalidierung …
Muhammad Adil 20 März 2023
Angular Angular Form
  1. Formularvalidatoren in AngularJS
  2. Benutzerdefinierte Validatoren in AngularJS
  3. Schritte zum Erstellen oder Hinzufügen einer benutzerdefinierten Formularvalidierung in AngularJS
Benutzerdefinierte Formularvalidierung in AngularJS hinzufügen

Validierung ist ein Prozess, bei dem die Korrektheit von Eingabedaten überprüft wird, typischerweise zur Fehlerkorrektur oder zur Datenkonsistenz. Die benutzerdefinierte Validierung von AngularJS ist eine leistungsstarke Bibliothek, mit der Entwickler benutzerdefinierte Validierungsregeln erstellen können.

In diesem Artikel werden wir alles über die benutzerdefinierte Validierung von AngularJS besprechen. Beginnen wir mit Formularvalidatoren.

Formularvalidatoren in AngularJS

Es gibt zwei Arten von Grundformen, die von Angular unterstützt werden.

  1. Vorlagengesteuerte Formulare
  2. Reaktive Formen

Das vorlagengesteuerte Formular bietet eine deklarative, benutzerfreundliche und bewährte Methode zum Erstellen eines Formulars. Dies ist die Standardform in Angular.

Das reaktive Formular ist eine API auf niedrigerer Ebene, die Ihnen mehr Kontrolle über das Verhalten Ihres Formulars gibt. Es ist darauf ausgelegt, reaktive Datenquellen wie Observables oder Event Emitter zu nutzen.

Jedes Feld in einem Formular kann als FormControl fungieren und spezifische Informationen zu diesem Feld zurückgeben, z. B. ob das Formular gültig ist, den tatsächlichen Feldwert und andere Details.

Benutzerdefinierte Validatoren in AngularJS

Angular verfügt über ein integriertes System zur Validierung von Daten namens Validator API. Wenn es jedoch um komplexere Validierungsregeln geht oder wenn die Validierungsregeln spezifisch für Ihre Anwendung sind, können Sie benutzerdefinierte Validatoren verwenden.

Benutzerdefinierte Validatoren in Angular sind sehr nützlich, da sie es Entwicklern ermöglichen, ihre eigenen Validierungsregeln zu erstellen, ohne auf externe Bibliotheken angewiesen zu sein. Sie machen es Entwicklern auch einfacher, die Validierungslogik außerhalb von Angular und anderen Anwendungsteilen zu erweitern.

Es ist wichtig zu beachten, dass die benutzerdefinierte Validierung von AngularJS mit jeder anderen Validierungsbibliothek wie jQuery verwendet werden kann, dies jedoch nicht erforderlich ist.

Schritte zum Erstellen oder Hinzufügen einer benutzerdefinierten Formularvalidierung in AngularJS

Die folgenden Schritte führen Sie durch die Erstellung einer benutzerdefinierten AngularJS-Formularvalidierung.

  1. Erstellen Sie ein neues AngularJS-Projekt.
  2. Binden Sie die CSS-Datei ng-bootstrap in unsere Datei index.html ein.
  3. Fügen Sie die JavaScript-Datei ng-bootstrap zu unserer Datei index.html hinzu.
  4. Erstellen Sie ein benutzerdefiniertes Formular mit einem Eingabefeld in der HTML-Seite und fügen Sie es in den Hauptteil von index.html ein.
  5. Erstellen Sie einen Angular-Controller und fügen Sie ihn zu index.html hinzu.
  6. Erstellen Sie eine Angular-Form-Direktive und fügen Sie sie zu index.html hinzu.
  7. Fügen Sie den Form-Controller in unseren Angular-Controller ein.

Lassen Sie uns ein Beispiel für die benutzerdefinierte Formularvalidierung in AngularJS besprechen.

HTML Quelltext:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
          <script src="app.js"></script>
</head>
<body ng-app="FormValidationExample">
  <div ng-controller="ctrlForm">
  <form name="myForm" novalidate>
    <div class="input-item">
      <label for="txtEmail">Your email</label><br>
      <input type="email" name="email" id="txtEmail" class="text-box" ng-model="email" required custom-focus />
      <div class="error-wrapper" ng-show="myForm.email.$dirty && myForm.email.$invalid && !myForm.email.$focused">
        <span ng-show="myForm.email.$error.required">Email is required</span>
        <span ng-show="myForm.email.$error.email">Please enter a valid email address</span>
      </div>
    </div>
  <input type="submit" value="Submit" ng-disabled="myForm.$invalid" />
  </form>
</div>
</body>
</html>

JavaScript-Code:

  angular.module('FormValidationExample', [])
    .controller('ctrlForm', ['$scope', function($scope) {
      $scope.checkboxes_motives = { 'checked': false, items: {} };
      $scope.choices = ['work', 'play'];
      $scope.selectAllMotives = function(value) {
        angular.forEach($scope.choices, function (motive) {
          $scope.checkboxes_motives.items[motive] = value;
        });
      };
    }])
    .directive('customFocus', [function() {
      var FOCUS_CLASS = "custom-focused";
      return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ctrl) {
          ctrl.$focused = false;
          element.bind('focus', function(evt) {
            element.addClass(FOCUS_CLASS);
            scope.$apply(function() {ctrl.$focused = true;});
          }).bind('blur', function(evt) {
            element.removeClass(FOCUS_CLASS);
            scope.$apply(function() {ctrl.$focused = false;});
          });
        }
      }
}]);

In diesem Beispiel haben wir eine E-Mail-Adresse validiert. Wenn Sie hier eine falsche E-Mail-Adresse eingeben, wird ein Fehler angezeigt, bis Sie sie korrigieren.

Klicken Sie hier, um die Live-Demonstration des Codes wie oben erwähnt zu überprüfen.

Autor: Muhammad Adil
Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

Verwandter Artikel - Angular Form