My requirement is to add an Angular reactive-form pattern validator that produces an error "Name is invalid" when the form control "name" contains the keyword "user" (case-insensitive)
Here is my form group
new FormGroup({
name: new FormControl('', [Validators.required, Validators.pattern('/user/i')]),
userType: new FormControl('', [Validators.required]),
})
HTML Part
<input
type="text"
class="form-control"
id="name"
aria-describedby="yourName"
formControlName="name"
/>
<div class="error-msg" *ngIf="testForm.get('name').hasError('required') && testForm.get('name').touched">
Name is required
</div>
<div class="error-msg" *ngIf="testForm.get('name').errors?.pattern && testForm.get('name').touched">
Name is invalid
</div>
I researched multiple answers on the stack with more or less similar context but can't seem to find what I am doing wrong here. Any help is appreciated.