Angular2：バリデータを追加する方法と必要なものを除外する方法

Question

ユーザーが入力した電子メールアドレスを確認するカスタムバリデーターを作成しました。とにかくメールフィールドは必須ではありませんが、バリデーターを追加すると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 
     } 
    }; 
} 

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

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

Answer 1

パラメータを取るカスタムバリデータを作成します。したがって、有効な電子メールをチェックしたり、必要な有効な電子メールをチェックしたりすることもできます。 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 
      } 
     }; 
    }; 
} 

Answer 2

は、制御値に空の文字列を許可：

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

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