web-dev-qa-db-ja.com

角度：空の場合、Validators.emailは無効です

フォーム（FormGroup）を含むアプリをAngular（4.0）で作成しています。このフォームには、メール入力（FormControl ）、Validators.email検証用。

import { Validators } from '@angular/forms';

// ...
let validators = [];
if ([condition]) {
    validators.Push(Validators.email);
}
let fc = new FormControl([value] || '', validators);
// ...

ただし、入力が空の場合は無効です（ng-invalid class）、必須ではない場合でも。

これは適切な動作ですか？私に何ができる？

javascriptangularformsvalidation
15
Roland Rácz

eric278のソリューションは非常に優れていますが、将来、Validators.emailの出力が変更された場合、このカスタムバリデーターは角度のバリデーター出力と互換性がなくなります。

互換性を保つためにすべきことは次のとおりです。

private customEmailValidator(control: AbstractControl): ValidationErrors {
  if (!control.value) {
    return null;
  }

  return Validators.email(control);
}
14
matewka

私が見つけた最良の解決策はこれでした：

<input type="email" name="email" [(ngModel)]="model.Email" [email]="model.Email!='' && model.Email!=null">
12
Alexandre N.

テンプレート駆動型フォームの回避策：

<input [(ngModel)]="model.email"  [email]="model.email!==''">

これは私にとってはうまくいきました（空の文字列でモデル値を初期化するようにしてください）。

5
Dieter Rehbein

カスタムバリデータを使用して、目的を達成できます。これが動作するように書いたバリデーターです：

_private customEmailValidator(control: AbstractControl): {[key: string]: any} {
    const emailError = Validators.email(control);
    if (control.value && emailError) {
        return {'email': {}};
    }

    return null;
}
_

その後、validators.Push(Validators.email);をvalidators.Push(this.customEmailValidator);に置き換えることができます

これは、角度のビルトイン電子メールバリデータを使用しますが、エラーを返す前に電子メールコントロールに値があることも確認します。

5
erics2783

これを行うための最短形式は次のとおりです。

<input [(ngModel)]="model.email" [email]="!!model.email">
3
Denis Beklarov