Использование Regex внутри текстовой области в шаблонной форме Angular

Question

У меня есть список

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

, а на html я отображаю содержимое этого списка.

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

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

У меня также есть textArea, где пользователь может напишите все, что он / она хочет. Вот сложная часть и кое-что, что я не могу понять. Если пользователь использует синтаксис <<userText>>, должна появиться ошибка проверки с указанием Please use text from list inside <<>>. Я могу выполнить эту часть, но не могу понять, нужно ли мне сделать регулярное выражение, и если да, пожалуйста, помогите мне с этим. Пожалуйста, спросите, если вам нужна дополнительная информация.

ps это просто то, что я создал, чтобы получить представление о моей проблеме, настоящий проект очень длинный, и я использую управляемые шаблоном формы Вот https://stackblitz.com/edit/angular-t4cfqc

Answer 1

Зависит от того, как вы хотите выполнить sh это и что именно вы пытаетесь сделать, но вы можете сделать что-то подобное

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

Вы также можете использовать атрибут pattern . Пример ниже

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

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