46

ユーザーがメールを入力するフォームを作成したいと考えています。クライアント側で電子メール形式を検証したいと思います。

Angular 2 に一般的な電子メール バリデータはありますか?

注意: AngularJS バリデーターに似たもの。

4

11 に答える 11

65

angular 4以降の場合：

Thisによると、「メールバリデータ」を使用できます。

例：

テンプレート駆動フォームを使用する場合:

<input type="email" name="email" email>
<input type="email" name="email" email="true">
<input type="email" name="email" [email]="true">

モデル駆動型フォーム (別名 ReactiveFormsModule) を使用する場合は、Validators.emailを使用します。

this.myForm = this.fb.group({
    firstName: ['', [<any>Validators.required]],
    email: ['', [<any>Validators.required, <any>Validators.email]],
});

古い答え: angular 2 FormGroupを使用できます。

次のように validators.pattern と regex を使用します。

 let emailRegex = '^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$';
 this.myForm = this.fb.group({
        firstName: ['', [<any>Validators.required]],
        email: ['', [<any>Validators.required,  <any>Validators.pattern(emailRegex) ]],
 });
于 2016-09-28T16:04:23.603 に答える
49

これを行うには、フォーム ディレクティブとコントロールを使用できます。

export class TestComponent implements OnInit {
     myForm: ControlGroup;
     mailAddress: Control;

     constructor(private builder: FormBuilder) {
         this.mailAddress = new Control(
            "",
            Validators.compose([Validators.required, GlobalValidator.mailFormat])
        );
     }

     this.addPostForm = builder.group({
            mailAddress: this.mailAddress
     });
}

輸入：

import { FormBuilder, Validators, Control, ControlGroup, FORM_DIRECTIVES } from 'angular2/common';

次に、GlobalValidatorクラス：

export class GlobalValidator {

    static mailFormat(control: Control): ValidationResult {

        var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;

        if (control.value != "" && (control.value.length <= 5 || !EMAIL_REGEXP.test(control.value))) {
            return { "incorrectMailFormat": true };
        }

        return null;
    }  
}

interface ValidationResult {
    [key: string]: boolean;
}

そしてあなたのHTML：

<div class="form-group">
    <label for="mailAddress" class="req">Email</label>
    <input type="text" ngControl="mailAddress" />
    <div *ngIf="mailAddress.dirty && !mailAddress.valid" class="alert alert-danger">
        <p *ngIf="mailAddress.errors.required">mailAddressis required.</p>
        <p *ngIf="mailAddress.errors.incorrectMailFormat">Email format is invalid.</p>
    </div>
</div>

これに関する詳細については、https ://medium.com/@daviddentoom/angular-2-form-validation-9b26f73fcb81#.jrdhqsnpg の優れた記事を読むか、この github プロジェクトで実際の例を参照してください。

（編集：その正規表現はドメイン内のドットをチェックしていないようです

代わりにこれを使っています

/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

cfr http://emailregex.com/

于 2016-02-18T09:28:17.100 に答える
7

RegEx を使用してフィールドを検証する別の方法を次に示します。メソッドをフィールドの keyUp イベントにバインドできます。

あなたのコンポーネントで：

import {NgForm} from 'angular2/common';

//...

emailValidator(email:string): boolean {
    var EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if (!EMAIL_REGEXP.test(email)) {
        return false;
    }
    return true; 
}

HTML（ビュー）で

<div class="form-group">
    <label>Email address</label>
    <input type="email" class="form-control" [(ngModel)]="user.email"
           placeholder="Email address" required ngControl="email"
           #email="ngForm"
           (keyup)="emailValidator(email.value) == false ? emailValid = false : emailValid = true">
    <div [hidden]="emailValid || email.pristine" class="alert alert-sm alert-danger">Email address is invalid</div>
</div>

別のオプション (必須フィールド + ユーザーがフィールドを離れたときに検証)

<div class="form-group">
    <label for="registerEmail">Email address</label>
    <input type="email" class="form-control" [(ngModel)]="user.email"
           placeholder="Email address" required ngControl="email"
           #email="ngForm"
           (blur)="emailValidator(email.value) == true ? emailIsInvalid = false : emailIsInvalid = true">
    <div [hidden]="email.valid || email.pristine" class="alert alert-sm alert-danger">This field is required</div>
    <div [hidden]="!emailIsInvalid" class="alert alert-sm alert-danger">Email address is invalid</div>
</div>

このメソッドはあらゆる検証で機能するため、正規表現を変更して、クレジット カード、日付、時刻などを検証できます。

于 2016-02-27T21:28:40.657 に答える
6

これを行うさらに別の方法は、カスタム ディレクティブを使用することです。他の ng2 バリデーターとの一貫性が高いため、このアプローチが気に入っています。

import { Directive, forwardRef } from '@angular/core';
import { NG_VALIDATORS } from '@angular/forms';
import { Validator, AbstractControl } from '@angular/forms';


@Directive({
    selector: '[validateEmail][formControlName], [validateEmail][formControl],[validateEmail][ngModel]',
    providers: [
        { provide: NG_VALIDATORS, useExisting: forwardRef(() => EmailValidator), multi: true }
    ]
})
export class EmailValidator implements Validator {

    constructor() {
    }

    validate(c: AbstractControl) {
        let EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;

        return EMAIL_REGEXP.test(c.value) ? null : {
            validateEmail: {
                valid: false
            }
        };


    }}

次に、htmlでの使用法は

<input class="form-control" 
               type="email"
               [(ngModel)]="user.emailAddress" 
               name="emailAddress" 
               placeholder="first.last@example.com"
               validateEmail
于 2016-11-03T12:32:39.073 に答える
4

今のところメールバリデーターはないと思いますが、カスタムバリデーターを追加するのはとても簡単です。angular1 と同じ正規表現を使用したこのデモを参照してください。

function emailValidator(control) {
  var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;

  if (!EMAIL_REGEXP.test(control.value)) {
    return {invalidEmail: true};
  }
}

于 2015-12-04T14:41:44.843 に答える