Using a regex to replace characters in a string in an Angular template

Question

I know that I can normally use myString.replace(/\*/g, '') to remove * from a string. But I cannot seem to make that work in a Angular HTML template. Here is what I doing...

<div class="panel panel--raised">
  <div class="row">
    <div class="form-group col-md-6">
      <div class="form-group__text">
        <input type="text" placeholder="Search... (min of 3 characters)" [(ngModel)]="searchString" minlength="3">
      </div>
    </div>
    <div class="col-md-6">
      <button class="btn btn--success btn--small host-info-button"
              [disabled]="searchString.replace(/\*/g, '').length < 3"
              (click)="getInfo(searchString)">Search</button>
    </div>
  </div>
</div>

Parser Error: Unexpected token /...

What am I doing wrong here?

Update:

What I am trying to do is make the user enter at least 3 characters that are not wildcard ( * ) characters. So a** would only count as 1 character and *** would count as zero characters, but *xyz* would count as 3 characters. I am not sure that Validator.pattern() would be able to accomplish this, but maybe I am just lacking imagination.

Answer 1

Unfortunately, RegExp literal is not supported by the templating language. They should be on your component.

More info on Angular Github repo issue: https://github.com/angular/angular/issues/21978

For this particular case, you can set up pattern validator and use something like this: Validators.pattern('/\*/g')

Answer 2

in template:

[disabled]="isDisabled"

in ts file:

get isDisabled(): boolean {
    return this.searchString.replace(/\*/g, '').length < 3;
}