Using Regex inside a textarea in Angular template driven form

Question

I have a list

  list = [
    "Nrvana",
    "Red Hot Chilli Peppers",
    "R.E.M",
    "Reef"
  ]

and on the html I am rendering the contents of this list.

<div *ngFor= "let x of list" > {{x}}
</div>
<hr/>

<div>
  <textarea></textarea>
</div>

I also have a textArea , where a user can write anything he/she wants. Here is the tricky part and something I am unable to figure out. If a user uses syntax <<userText>> , a validation error should pop up stating Please use text from list inside <<>> . I can do this part but I can't figure out if I need to make a regex and if yes, please help me with it. Please ask if you need any more information.

ps this is just something I created to get an idea of my problem, the actual project is a very long one and I am using template-driven forms Here is a https://stackblitz.com/edit/angular-t4cfqc

Answer 1

Depends how you want to accomplish this and what you are exactly trying to do but you could do something like this

HTML

<textarea [(ngModel)]="textAreaText" [(ngModelChange)]="checkText()"></textarea>

.TS

textAreaText: string;

// ...

checkText() {
  const regex = /(?:^|\s)<<(.*?)>>(?:\s|$)/g;

  // If you only want to use certain keywords you could do something like this
  const regex = /(?:^|\s)<<((keyword1)|(keyword2)|(keyword3))>>(?:\s|$)/g;

  if (regex.test(this.textAreaText)) {
    // do something
  } else {
    // do something else
  }
}

Answer 2

You can make use of pattern attribute too. Example below

<textarea pattern="/(?:^|\s)<<(.*?)>>(?:\s|$)/g" [(ngModel)]="myTextArea" #myTextAreaModel="ngModel" required></textarea>

<div *ngIf="myTextAreaModel.errors.pattern">Your error msg here</div>