1

ユーザーが入力したメールアドレスをチェックするカスタムバリデーターを作成しました。とにかく、電子メールフィールドは必須ではありませんが、バリデーターを追加すると、それも含まrequiredれます。

constructor私のコンポーネントクラスのフォームは次のとおりです。

    this.myForm = fb.group({
        'name': [''],
        'surname': [''],
        'username': ['', Validators.required],
        'email': ['', validateEmail]
    });

電子メール フィールドは必須ではありませんが、ユーザーが入力しない場合、フォームは検証されません。同時に、ユーザーが入力すると、電子メールの検証が適用されます。

これが私の電子メールバリデータです：

export function validateEmail(c: FormControl) {
    var EMAIL_REGEXP = /^(|(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9]+@((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6})*$/i;

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

空の文字列を受け入れるようにカスタム バリデータを編集できますが、これは問題を解決する正しい方法ではないと思います。

もっと良いアイデアはありますか？

4

2 に答える 2

0

パラメータを取るカスタムバリデータを作成します。そのため、有効なメールをチェックしたり、必要な有効なメールをチェックしたりするためにも使用できます。trueまたはで呼び出すかどうかに応じて、再利用可能であり、不要になることさえありますfalse。

コードは次のとおりです。

import {FormControl} from "@angular/forms";

export const validateEmail = (canBeEmpty:boolean) => {
    return (control:FormControl) => {
        var EMAIL_REGEXP = /^(|(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9]+@((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6})*$/i;

        if (canBeEmpty) {
            EMAIL_REGEXP = /^$|^(|(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9]+@((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6})*$/i;
        }

        return EMAIL_REGEXP.test(control.value) ? null : {
            validateEmail: {
                valid: false
            }
        };
    };
}
于 2016-12-12T08:30:57.117 に答える
0

次のように、制御値に空の文字列を許可します。

static emailValidator(control: any) {
  // RFC 2822 compliant regex
  var EMAIL_REGXP = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;

  if ( control.value === '' || control.value.match(EMAIL_REGXP) ) {
    return null;
  } else {
    return { 'invalidEmailAddress': true };
  }
};

関数の目的は、電子メール形式に準拠する必要がある無効な文字列を見つけることであるため、これが副作用と見なされることはないと思います。

于 2017-03-29T22:18:40.640 に答える