严格限制 textarea Angular 中的行数

Posted 2023-05-07

【中文标题】严格限制 textarea Angular 中的行数

【英文标题】：Strictly Limit the number of rows in textarea Angular

【发布时间】：2020-01-06 03:17:06

【问题描述】：

我正在寻找有关如何限制允许的行和列以 Angular 方式输入 textarea 的解决方案。我找到了很多使用jQuery 的解决方案，而且有点乱。我想知道是否有 Angular 方法可以做到这一点。

可以这么说，我确实有一个文本区域需要严格限制行数和列数。我是这样设置的。

<textarea matInput formControlName="cardDescription" rows="5" cols="5" placeholder="Card Description"></textarea>

不幸的是，这行代码只初始化了大约 5 个 rows 的视图，我认为 cols 没有做任何事情。

我在这里错过了什么？

【参考方案1】：

尝试这样做

html:

<textarea cols="30" rows="5" [(ngModel)]="data" (ngModelChange)="doSomething($event)"></textarea>

.ts:

 data: any = '';
 doSomething(event)

    var lines = 5;

        let newLines = this.data.split("\n").length;

        if(event.keyCode == 13 && newLines >= lines) 
            console.log('limit exceeded')
        
        else 
            console.log('input under limit')
        
    

【讨论】：

这是jQuery 方法。我正在寻找 Angular 方式。