I am encountering an issue where I am unable to bind the :invalid CSS selector with my input due to having custom validation. The invalid state only activates with a basic validator example like input type="email", so it will work with examples such as example@ or [email protected] while my function only validates the latter ([email protected]). Project Link
HTML FILE
<input class="custom-input" type="email" [(ngModel)]='Email' name="email" placeholder="Email" formControlName="emailTxt">
<div class="err>
this is an error
</div>
TypeScript File
this.signUpForm = this._fb.group({
emailTxt: [null, Validators.compose([
Validators.required
])]
}, {
validators: [
EmailValidation('emailTxt'),
]
});
Form Validation Function
export function EmailValidation(controlName: string) {
return (formGroup: FormGroup) => {
const control = formGroup.controls[controlName];
if (control.errors && !control.errors.invalidEmail) {
return;
}
if (control.value.trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
control.setErrors({ invalidEmail: true });
}
else {
control.setErrors(null);
}
}
}
CSS File
.custom-input:invalid{
& ~ .err {
max-height:200px;
padding:0 18px 10px 20px;
color:red;
}
}
I expect the invalid selector to be triggered with every control.setErrors() function.