Angular2: how to add validator and exclude required - forms

Question

I created a custom validator to check email addresses filled by users. Anyway the email field is not required, but if I add my validator it includes required as well.
Here is my form in the constructor of my component class:
this.myForm = fb.group({
'name': [''],
'surname': [''],
'username': ['', Validators.required],
'email': ['', validateEmail]
});
Email field is not required, but if users doesn't fill it, the form doesn't get validated. At the same time if users fill it, I want that the email validation is applied.
Here is my email validator:
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
}
};
}
I could edit my custom validator to accept empty strings, but I think this is not the right way to solve my problem.
Do you have a better idea?

Answer 1

I create a custom validator that take a parameter. So it can be use to check valid email and even to check required valid email.
It is still reusable and it can be even not required, according if you call it with true or false.
Here is the code:
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

Allow an empty string for control value, as follows:
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 };
}
};
I don't think this could be seen as a side-effect as the purpose of the function is to find invalid strings that should conform to an email format.