Angular проверка шаблона в HTML текстовой области

Question

Я использую HTML textarea в приложении angular 8. Я пытаюсь использовать регулярные выражения для проверки ввода в текстовой области, но, к сожалению, он не работает. Я использую текстовое поле во всплывающем окне bootstrap и отключаю кнопку отправки, если проверка не удалась. К сожалению, я не использую Реактивные формы или формы на основе шаблонов. Вот мой код и то, что я пробовал:

<textarea id="reasonTex" rows="4" cols="64" [(ngModel)]="reason" (ngModelChange)='reasonChange()'
   [pattern]="reasonPattern" #rareason="ngModel">
</textarea>
<div *ngIf="rareason.errors.pattern"> 
    Reason not valid.
</div>  

TS:

reasonPattern = "^(?!\s*$).+";

Answer 1

Regex

Чтобы проверить, не является ли первый символ строки не пустым, вы можете использовать выражение ^\S.*$. Объяснение объяснения здесь .

Машинопись

Чтобы оценить строку с регулярным выражением, вы можете использовать test() метод. Он возвращает логическое значение на основе переданного ему аргумента.

Теперь, когда у нас есть выражение регулярного выражения и способ проверить его в Typescript, вам нужно только получить ввод текста в textarea, проверить его против выражения регулярного выражения и привяжите к нему свойство кнопки [disabled].

Компонент

export class NgbdModalContent {
  @Input() name;
  textAreaValue: any;
  enableSubmit = false;

  constructor(public activeModal: NgbActiveModal) {}

  onKeyUp(event: any) {
    this.enableSubmit = /^\S.*$/.test(this.textAreaValue);
  }
}

Шаблон

<div class="modal-header">
  <h4 class="modal-title">Hi there!</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <textarea style="background-color:white;color:black;" [(ngModel)]='textAreaValue' (keyup)="onKeyUp($event)">                             
  </textarea>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" [disabled]="!enableSubmit" (click)="activeModal.close('Close click')">Submit</button>
</div>

Рабочий пример: Stackblitz