Предотвратить нажатие Enter, чтобы создать новую строку в Angular4

Question

У меня есть текстовое поле, которое я отправляю при нажатии Enter

https://stackblitz.com/edit/angular-uvxifq-uyxteg

<textarea class="message-area" (keyup.enter)="ValidateCommentAndPost(commentErr, $event);" [(ngModel)]="comment" matInput #commentErr="ngModel"></textarea>

Я хотел бы отключить новую строку, пока я нажимаю клавишу ввода, поэтому я взял некоторую информацию овеб и сделал.

ValidateCommentAndPost(ngComment:NgModel, event?:KeyboardEvent){
    event.preventDefault();
    if((ngComment.invalid && (ngComment.dirty || ngComment.touched)) && ngComment.errors) {
        this.ResetComment();
    } else {
        this.PostComment();
    }
}

Но это не работает, также, return false; по-прежнему создает белую линию.

Что я могу сделать?

Answer 1

Добавить событие, чтобы захватить ввод и предотвратить поведение по умолчанию.Добавьте событие keydown в ваш компонент html

<textarea required
(keydown.enter)="onKeydown($event)" (keyup.enter)="ValidateCommentAndPost(commentErr, $event);" pattern="/^[/\S/]+$/i" [(ngModel)]="value" matInput #commentErr="ngModel"></textarea>

и добавьте его в файл ts вашего компонента

onKeydown(event){
      event.preventDefault();
    }