Unable to figure out invalid pattern in form validation

Question

I am using Angular 7 Admin -dashboard and I am creating a registration page. I have introduced validations such as required and pattern in the form. However, irrespective of the pattern in the validation, I keep getting "invalid pattern" in the UI. I am unable to figure out my mistake.

app.component.ts

constructor(private fb:FormBuilder , private http: HttpClient) {

    this.registrationForm = this.fb.group({
      'username': ['',[Validators.required, Validators.pattern("[A-Za-z0-9 @)(_\\-]{1,20}")]],
      'firstname':['', [Validators.required, Validators.pattern("[A-Za-z @)(]{1-20}")]],
      'lastname':['',[Validators.required, Validators.pattern("[A-Za-z @)(]{1-20}")]],
      'city': ['', [Validators.required, Validators.pattern("[A-Za-z0-9 @)(_\\-)]{1-30}") ]] ,
      'pin': ['',[Validators.required, Validators.pattern("[0-9 @)(\\-_]{1-20}")]],
      'dob':['',[Validators.required, Validators.pattern("[0-9 @)(\\-/]{1-20}")]],
      'email':['',[Validators.required, Validators.pattern("[A-Za-z0-9@)(_\\-/)(*&^%$#:,=+`]")]],
      'mobile':['',[Validators.required, Validators.pattern("[0-9]{10}")]],
      'password':['', [Validators.required, Validators.pattern("[A-Za-z0-9 @)(*&^%$#@!~`:;.,/?+/*\\-]{4-30}") ]],
      'confirmPassword':['',[Validators.required, Validators.pattern("[A-Za-z0-9 @)(*&^%$#@!~`:;.,/?+/*\\-]{4-30}") ]]
    })
   }

app.component.html

 <form [formGroup]="registrationForm"  (ngSubmit)= "register(registrationForm.value)">
            <div class = "col-md-8">
            <div class="form-group">

              <label>User-Id</label>
              <input type="text" class="form-control" [formControl]="registrationForm.controls['username']"
                formControlName="username">
                <p id = "validatorStyle" *ngIf="registrationForm.get('username').hasError('required') && registrationForm.get('username')?.touched">*required </p>
                <p id = "validatorStyle" *ngIf="registrationForm.get('username').hasError('pattern') ">*invalid pattern </p>
            </div>
            <div class="form-group">
              <label>First Name</label>
              <input type="text" class="form-control" [formControl]="registrationForm.controls['firstname']"
                formControlName="firstname">
                <p id="validatorStyle" *ngIf="registrationForm.get('firstname').hasError('required') && registrationForm.get('firtname')?.touched">*required</p>
                <p id="validatorStyle" *ngIf="registrationForm.get('firstname').hasError('pattern')">*invalid pattern</p>
              </div>
            <div class="form-group">
              <label>Last Name</label>
              <input type="text" class="form-control" [formControl]="registrationForm.controls['lastname']"
                formControlName="lastname">
                <p id = "validatorStyle" *ngIf="registrationForm.get('lastname').hasError('required') && registrationForm.get('lastname')?.touched">*required </p>
                <p id = "validatorStyle" *ngIf="registrationForm.get('lastname').hasError('pattern') ">*invalid pattern </p>
            </div>
            <div class="form-group">
              <label>City</label>
              <input type="text" class="form-control" [formControl]="registrationForm.controls['city']" formControlName="city">
              <p id = "validatorStyle" *ngIf="registrationForm.get('city').hasError('required') && registrationForm.get('city')?.touched">*required </p>
              <p id = "validatorStyle" *ngIf="registrationForm.get('city').hasError('pattern') ">*invalid pattern </p>
          </div>
            <div class="form-group">
              <label>Pin</label>
              <input type="text" class="form-control" [formControl]="registrationForm.controls['pin']" formControlName="pin">
              <p id = "validatorStyle" *ngIf="registrationForm.get('pin').hasError('required') && registrationForm.get('pin')?.touched">*required </p>
              <p id = "validatorStyle" *ngIf="registrationForm.get('pin').hasError('pattern') ">*invalid pattern </p>
          </div>
            <div class="form-group">
              <label>DOB</label>
              <input type="text" class="form-control" [formControl]="registrationForm.controls['dob']" formControlName="dob">
              <p id = "validatorStyle" *ngIf="registrationForm.get('dob').hasError('required') && registrationForm.get('dob')?.touched">*required </p>
              <p id = "validatorStyle" *ngIf="registrationForm.get('dob').hasError('pattern') ">*invalid pattern </p>
          </div>
            <div class="form-group">
              <label>Email</label>
              <input type="email" class="form-control" [formControl]="registrationForm.controls['email']"
                formControlName="email">
                <p id = "validatorStyle" *ngIf="registrationForm.get('email').hasError('required') && registrationForm.get('email')?.touched">*required </p>
                <p id = "validatorStyle" *ngIf="registrationForm.get('email').hasError('pattern') ">*invalid pattern </p>
            </div>
            <div class="form-group">
              <label>Phone number</label>
              <input type="text" class="form-control" [formControl]="registrationForm.controls['mobile']"
                formControlName="mobile">
                <p id = "validatorStyle" *ngIf="registrationForm.get('mobile').hasError('required') && registrationForm.get('mobile')?.touched">*required </p>
                <p id = "validatorStyle" *ngIf="registrationForm.get('mobile').hasError('pattern') ">*invalid pattern </p>
            </div>
            <div class="form-group">
              <label>Password</label>
              <input type="text" class="form-control" [formControl]="registrationForm.controls['password']"
                formControlName="password">
                <p id = "validatorStyle" *ngIf="registrationForm.get('password').hasError('required') && registrationForm.get('password')?.touched">*required </p>
                <p id = "validatorStyle" *ngIf="registrationForm.get('password').hasError('pattern') ">*invalid pattern </p>
            </div>
            <div class="form-group">
              <label>Confirm Password</label>
              <input type="text" class="form-control" [formControl]="registrationForm.controls['confirmPassword']"
                formControlName="confirmPassword">
                <p id = "validatorStyle" *ngIf="registrationForm.get('confirmPassword').hasError('required') && registrationForm.get('confirmPassword')?.touched">*required </p>
                <p id = "validatorStyle" *ngIf="registrationForm.get('confirmPassword').hasError('pattern') ">*invalid pattern </p>
            </div>

            <div class="text-center">
<button type="submit" [routerLink]="['dashboards/v1']" [disabled]="!registrationForm.valid" class="btn-btn-dark">Submit</button>
            </div>
          </div>
          </form>

Image

Answer 1

This is more of a regular expression issue than Angular.

Regular expressions can be tricky, use a regex tool like https://regex101.com/ to debug it.

When a regex is not working as intended, a tip is to start with the most basic expression and add complexity from there until it breaks/the test cases fail, then you will know where the error is.

Answer 2

You have issues with your regular expressions.

For city you have:

[A-Za-z0-9 @)(_\\-)]{1-30}

Correct would be:

[A-Za-z0-9 @)(_\\-)]{1,30}