Angular - Validation for pattern-CodePudding

I'm trying to use a pattern validator for an imdb title id, I tested my pattern on the Angular docs online example and it worked. But somehow it doesn't work on my app.

This is what I have:

this.showForm = this.fb.group({
  ...
  imdb: ['', [Validators.required,Validators.pattern('^tt\d{1,}$')]],
  ...
});

My component HTML code looks like this:

<label>IMDB-ID</label>
<input type="text" formControlName="imdb"  placeholder="imdb id (required)" />
<span >
  <span *ngIf="showForm.get('imdb').errors?.required">
    you must enter the imdb id
  </span>
  <span *ngIf="showForm.get('imdb').errors?.pattern">
    please enter a valid imdb-id
  </span>

So theoretically something like this "tt12345" shouldn't trigger the error:

please enter a valid imdb-id

CodePudding user response：

You need to escape the "\" character with another backslash.

Validators.pattern('^tt\\d{1,}$')

Sample StackBlitz Demo