0

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.

0 Answers0