E-Mail-Validierung in Angular

1. Eingabevalidierung in Angular
2. Möglichkeiten zur Validierung von E-Mail-Adressen in Angular
3. AngularJS-Validierung (E-Mail) mit regulären Ausdrücken und ng-pattern:

AngularJS bietet eine einfache Überprüfung der Eingabedaten auf der Clientseite. In Ihrem Formular können viele Eingabefelder vorhanden sein, die beim Sammeln von Daten von Ihren Benutzern helfen. Bevor Sie jedoch irgendetwas mit den Daten tun, müssen Sie die Werte in den Feldern validieren. In diesem Artikel werden wir besprechen, wie E-Mails in AngularJS validiert werden.

Eingabevalidierung in Angular

Die Daten eines Eingabesteuerelements werden mithilfe einer Validierung validiert. Wenn die Informationen die Überprüfung nicht bestehen, erhält der Benutzer eine Fehlermeldung. Erforderliches Feld, minimale Länge, maximale Länge, Muster und viele andere Arten der Validierung gibt es in AngularJS.

Syntax der E-Mail-Validierung in AngularJS:

<form name="Form">

  Code: <input type="text" name="pincode" ng-model="txtpin" ng-pattern="/^[0-9]{1,5}$/" />
  
  <span ng-show="personForm.pincode.$error.pattern"> Only numbers allowed </span>
  
  </form>

Möglichkeiten zur Validierung von E-Mail-Adressen in Angular

Angular hat mehrere Methoden zum Validieren von E-Mails, von denen einige unten aufgeführt sind:

Integrierte Validierung: Angular hat speziell E-Mail-Validatoren installiert, mit denen Sie die vom Benutzer bereitgestellten E-Mail-Adressen überprüfen können.

Mustervalidierung: Sie können ein Angular-E-Mail-Validierungsmuster für einen regulären Ausdruck (Regex) angeben, das mit dem vom Benutzer bereitgestellten Wert übereinstimmen muss, bevor die Validierung erfolgt.

Beispiel für E-Mail-Validierung:

<script src="https://code.angularjs.org/1.2.1/angular.min.js"></script>
<div class="container" ng-app="myApp">
<div class="Sample">
    <div class="form-area" ng-controller="formCtrl">  
        <form role="form" name="inquiryForm" novalidate>
        <br style="clear:both">
                    <h3 style="margin-bottom: 25px; text-align: center;">Example</h3>

					<div class="form-group">
						<input name="email" ng-model="email" id="eml" type="text" ng-pattern="eml_add" ng-required="true" autocomplete="off" placeholder="Email" class="form-control" >            
					</div>

            
        <button type="button" id="submit" name="submit" class="btn btn-primary pull-right" ng-disabled="inquiryForm.$invalid">Submit Form</button>
        </form>
    </div>
</div>
</div>

AngularJS-Validierung (E-Mail) mit regulären Ausdrücken und ng-pattern:

In AngularJS können Sie reguläre Ausdrücke (RegEx) verwenden, um Validierungen zu bilden. Sie müssen die Direktive ng-pattern verwenden, um mit den Ausdrücken zu arbeiten. Was ist ng-pattern? Lassen Sie uns darüber diskutieren.

ng-pattern-Direktive in AngularJS

Das ng-Muster in AngularJS wird verwendet, um Eingabetextsteuerelemente mit regulären Ausdrücken zu validieren. Wenn der Eingabetext gemäß der Bedingung validiert wird, gibt der Befehl ng-pattern wahr zurück; Andernfalls wird ein Fehler ausgegeben. Um mehr über ng-pattern zu erfahren, hier klicken.

Bevor Sie im Detail diskutieren, sollten Sie die Idee der folgenden Richtlinie haben:

• ng-minlength: Liefert die kürzestmögliche Länge.
• ng-maxlength: Liefert die größtmögliche Länge.
• ng-model Weist dem Feld Validierungsattribute zu, wie $error, $valid usw.
• ng-required Hiermit wird das erforderliche Feld bereitgestellt.
• ng-show Dieser Befehl zeigt eine Fehlermeldung basierend auf einem Parameter an.

Zu Beginn müssen Sie ng-messages als Modulabhängigkeit hinzufügen, da dies möglicherweise erforderlich ist.

<form name="form">
            
  <input type="email" name="emailID" ng-model="email"
      placeholder="Enter an Email ID"
      ng-required="true" 
      ng-pattern=" ^[a-z]+[a-z0-9._-]+@[a-z]+\.[a-z.]{2,5}$"/>

      <div *ngIf="firstEmail.errors || firstEmail.touched">
        <small class="text-danger" *ngIf="firstEmail.errors.required">Primary email is required</small>
    
      </div>
  <input type="submit" ng-disabled="form.$invalid || !email" />

</form>

ng-required="true" ist das erste, was auffällt. Dies macht das Ausfüllen des Eingabeformulars erforderlich. Dann kommt das ng-pattern. Die Direktive ng-pattern enthält Ausdrücke oder Muster, die AngularJS überprüft, um eine E-Mail-ID zu validieren (Sie können Werte hinzufügen oder entfernen).

Wenn der Benutzer eine E-Mail-Adresse eingibt, die nicht dem XYZ-Format entspricht, erhalten wir eine Fehlermeldung.

Die Direktive ng-pattern enthält Ausdrücke oder Muster, die AngularJS überprüft, um eine E-Mail-ID zu validieren (Sie können Werte hinzufügen oder entfernen).

Abschließend möchten wir den Verbrauchern Fehlerbenachrichtigungen in Echtzeit bereitstellen, um ihnen bei der Behebung von Problemen mit ihren angegebenen E-Mail-Adressen zu helfen.

Lassen Sie uns das div-Element hinzufügen, das bei der bedingten Anzeige von Fehlerwarnungen für Benutzer hilft. Wenn das E-Mail-Feld Probleme enthält, verwenden wir automatisch die Direktive *ngIf, um dieses Element zu rendern.

Lassen Sie uns separate Fehlermeldungen für jede Regel generieren, die wir im ersten Schritt oben innerhalb des div-Tags festgelegt haben. Verwenden wir das Fehlerobjekt des Formulars und die Direktive *ngIf, um die Nachrichten dynamisch zu rendern. Wir werden zuerst sehen, ob das Fehlerobjekt vorhanden ist, bevor wir zur Eigenschaft needed oder pattern gehen.