angular2 - adding 'pattern' for form builder - regex

Question

I have a pattern for a form builder and I have this:
this.userForm = this.formBuilder.group({
'postalCode': ['', Validators.pattern('/[A-Za-z][0-9][A-Za-z] [0-9][A-Za-z][0-9]/i')]
});
I have a ValidationService which I've added a function "getValidatorErrorMessage".
static getValidatorErrorMessage(validatorName: string, validatorValue?: any) {
let config = {
'pattern': 'invalid pattern'
};
return config[validatorName];
}
My template has:
<div>
<label for="postalCode">Postal code (A1A 2J3)</label>
<input formControlName="postalCode" id="postalCode" />
<control-messages [control]="userForm.controls.postalCode"></control-messages>
</div>
But for some odd reason, the validation messages arent displaying if I dont follow the regex code.
You can view the plunkr here.

Answer 1

That's because you set a condition in your ControlMessagesComponent that input field has to be touched in order for error message to be displayed:
get errorMessage() {
for (let propertyName in this.control.errors) {
if (this.control.errors.hasOwnProperty(propertyName) &&
this.control.touched) { // this line
return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
}
}
return null;
}
If you remove this.control.touched, validation will be performed as you type. But this also will result in required messages being displayed right away. Combination I prefer most is to display error message in two cases: when user clicks on input field and then clicks somewhere else or when user starts typing which can be achieved with following condition:
if (this.control.errors.hasOwnProperty(propertyName) &&
this.control.dirty ||
this.control.touched)