validate email on angular 4

Question

i'm new to reactive form in angular 4. how do i put a pattern validation in email? i'm confused with https://angular.io/api/forms/EmailValidator

app.component.htmlapp.component.tsmodal

Answer 1

If you need mail validator, you can use my code:

export class GlobalValidator
{
    static mailFormat(control: FormControl)
    {
        const 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 (control.value && !EMAIL_REGEXP.test(control.value))
        {
            return {
                validateEmail: {
                    valid: false,
                    message: "Not valid email."
                }
            };
        }

        return null;
    }

    //other validators like numeric, lowerCase, uppercase, conditional, compare ...
}

and when settings form:

this.userForm = new FormGroup({
                email: new FormControl(null, [Validators.required, GlobalValidator.mailFormat]),
                displayName: new FormControl(null),
                type: new FormControl(null, [Validators.required]),
                password: new FormControl(null, [Validators.required, Validators.minLength(6), GlobalValidator.numericRule, GlobalValidator.lowerCaseRule, GlobalValidator.upperCaseRule, GlobalValidator.nonAlpahuNericCaseRule]),
                passwordConfirm: new FormControl(null, [Validators.required]),
            }, GlobalValidator.compareValidator("password", "passwordConfirm"));

And here is complete Global Validator:

export class GlobalValidator
{
    static mailFormat(control: FormControl)
    {
        const 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 (control.value && !EMAIL_REGEXP.test(control.value))
        {
            return {
                validateEmail: {
                    valid: false,
                    message: "Not valid email."
                }
            };
        }

        return null;
    }

    static numericRule(control: FormControl)
    {
        if (control.value && !(/\d/.test(control.value)))
        {
            return {
                numericRule: {
                    valid: false,
                    message: "Numeric char missing."
                }
            };
        }
        return null;
    }

    static lowerCaseRule(control: FormControl)
    {
        if (control.value && !(/[a-z]/.test(control.value)))
        {
            return {
                lowerCaseRule: {
                    valid: false,
                    message: "Lower case character missing."
                }
            };
        }
        return null;
    }

    static upperCaseRule(control: FormControl)
    {
        if (control.value && !(/[A-Z]/.test(control.value)))
        {
            return {
                upperCaseRule: {
                    valid: false,
                    message: "Upper case character missing."
                }
            };
        }
        return null;
    }

    static nonAlpahuNericCaseRule(control: FormControl)
    {
        if (control.value && !(/[\W_]+/g.test(control.value)))
        {
            return {
                nonAlpahuNericCaseRule: {
                    valid: false,
                    message: "Non-alphanumeric character missing."
                }
            };
        }
        return null;
    }

    static compareValidator(fc1: string, fc2: string)
    {
        return (group: FormGroup): { [key: string]: any } =>
        {
            if (group.value)
            {
                const password = group.value[fc1];
                const passwordConfirm = group.value[fc2];
                if (password !== passwordConfirm)
                {
                    return {
                        compareFailed: {
                            valid: false,
                            message: "Password not match."
                        }
                    }
                }
            }
            return null;
        }
    }

    static conditional(conditional: (group: FormGroup) => boolean, validator)
    {
        return function (control)
        {
            revalidateOnChanges(control);

            if (control && control._parent)
            {
                if (conditional(control._parent))
                {
                    return validator(control);
                }
            }
        };
    }
}

function revalidateOnChanges(control): void
{
    if (control && control._parent && !control._revalidateOnChanges)
    {
        control._revalidateOnChanges = true;
        control._parent
            .valueChanges
            .distinctUntilChanged((a, b) =>
            {
                // These will always be plain objects coming from the form, do a simple comparison
                if (a && !b || !a && b)
                {
                    return false;
                } else if (a && b && Object.keys(a).length !== Object.keys(b).length)
                {
                    return false;
                } else if (a && b)
                {
                    for (let i in a)
                    {
                        if (a[i] !== b[i])
                        {
                            return false;
                        }
                    }
                }
                return true;
            })
            .subscribe(() =>
            {
                control.updateValueAndValidity();
            });
    }
}

Answer 2

any of these three options will validate the email for you without the need of providing the regex because angular already does it for you

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

https://angular.io/api/forms/EmailValidator