Angular での E メール検証

1. Angular での入力検証
2. Angular で E メールアドレスを検証する方法
3. 正規表現と ng-pattern:を使用した AngularJS 検証（E メール）

AngularJS は、クライアント側で簡単な入力データ検証を提供します。フォームには多くの入力フィールドがあり、ユーザーからデータを収集するのに役立ちます。ただし、データを処理する前に、フィールドの値を検証する必要があります。この記事では、AngularJS で E メールを検証する方法について説明します。

Angular での入力検証

入力コントロールのデータは、検証を使用して検証されます。情報が検証に合格しない場合、ユーザーはエラーメッセージを受け取ります。必須フィールド、最小長、最大長、パターン、およびその他の多くのタイプの検証が AngularJS に存在します。

AngularJS での E メール検証の構文：

<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>

Angular で E メールアドレスを検証する方法

Angular には E メールの検証のためのいくつかの方法があり、そのうちのいくつかを以下に示します。

組み込みの検証：Angular には、ユーザーが指定した電子メールアドレスを確認するために使用できる電子メール検証ツールが特別にインストールされています。

パターン検証：検証が行われる前にユーザーが指定した値と一致する必要がある正規表現（regex）の Angular 電子メール検証パターンを指定できます。

電子メール検証の例：

<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>

正規表現と ng-pattern:を使用した AngularJS 検証（E メール）

AngularJS では、正規表現（RegEx）を使用して検証を行うことができます。式を操作するには、ng-pattern ディレクティブを使用する必要があります。ng-pattern とは何ですか？それについて話し合いましょう。

AngularJS の ng-pattern ディレクティブ

AngularJS の ng-pattern は、正規表現を使用して入力テキストコントロールを検証するために使用されます。入力テキストが条件に従って検証された場合、ng-pattern コマンドは true を返します。それ以外の場合は、エラーがスローされます。ng-pattern の詳細については、ここをクリックしてください。

詳細に説明する前に、次のディレクティブについて理解しておく必要があります。

• ng-minlength: 可能な限り短い長さを提供します。
• ng-maxlength: 可能な限り拡張された長さを提供します。
• ng-model: $error、$valid などの検証属性をフィールドに割り当てます。
• ng-required: これは、必須フィールドを提供するために使用されます。
• ng-show: このコマンドは、パラメータに基づいてエラーメッセージを表示します。

開始するには、モジュールの依存関係として ng-messages を追加する必要があります。これは必要な場合があるためです。

<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"が最初に気付くものです。そのため、入力フォームに記入する必要があります。次に、ng-pattern が来ます。ng-pattern ディレクティブには、AngularJS が電子メール ID を検証するために検証する式またはパターンが含まれています（値を追加または削除できます）。

ユーザーが XYZ 形式に従わない E メールアドレスを入力すると、エラーが発生します。

ng-pattern ディレクティブには、AngularJS が電子メール ID を検証するために検証する式またはパターンが含まれています（値を追加または削除できます）。

最後に、提供された電子メールアドレスの問題を修正するのに役立つリアルタイムのエラー通知を消費者に提供しましょう。

div 要素を追加してみましょう。これは、ユーザーにエラー警告を条件付きで表示するのに役立ちます。電子メールフィールドに問題が含まれている場合は、*ngIf ディレクティブを自動的に使用してこの要素をレンダリングします。

上記の最初のステップで div タグ内に設定したルールごとに個別のエラーメッセージを生成してみましょう。フォームのエラーオブジェクトと*ngIf ディレクティブを使用して、メッセージを動的にレンダリングしてみましょう。まず、needed や pattern のプロパティにアクセスする前に、errors オブジェクトが存在するかどうかを確認します。