html - 防止按 Enter 在 Angular4 中创建新行

Question

我有一个按 Enter 时提交的 textarea

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

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

我想在按下 Enter 键时禁用新 Line，所以我在网上获取了一些信息并做了 .

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();
    }