CSS Invalid selector not working with reactive form - html

Question

I'm facing a problem where i cannot bind :invalid css selector with my input since i have custom validation. invalid is only active with basic validator example: input type="email" so the invalid will work with example# or example#example.exmaple while my function only validates the last one (example#example.example).
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 should to be triggered with every control.setErrors() function

Answer 1

Add below CSS code in your project, that's definitely works
input.ng-dirty.ng-invalid {
border: 1px solid red;
}

Answer 2

This will work Definitely ☺ add to ur css file
input.ng-invalid.ng-touched, select.ng-invalid.ng-touched {
border: 1px solid red !important;
}