在 angular 中调整 TextArea 的大小 5

Question

我是 Angular 的新手。我想让文本区域可自动调整大小，就像在本例中 https://www.primefaces.org/primeng/#/inputtextarea。我尝试了不同的方法，但在 Angular 5 上没有任何效果。

此代码显示了我的初始版本的 textarea。

<div class="form-group" contenteditable="true">
    <label for="description">Description</label>
    <textarea type="text" class="form-control" id="description" [(ngModel)]="dish.description" #description="ngModel" name="description" required></textarea>
    <div [hidden]="description.valid || description.pristine" class="alert alert-danger">Description can't be empty</div>
</div>

非常感谢你的帮助，谢谢。

Answer 1

终于找到解决方案

  autogrow() { 
    let textArea = document.getElementById("description") 
    textArea.style.overflow = 'hidden'; 
    textArea.style.height = 'auto'; 
    textArea.style.height = textArea.scrollHeight + 'px'; 
}

在HTML中：

<textarea style="resize:vertical" (keyup)="autogrow()" rows="3" (click)="autogrow()" type="text" class="form-control" id="description" [(ngModel)]="myprivateObject.description" #description="ngModel" name="description" required></textarea>

Answer 2

您可能不需要编写自己的指令或事件处理程序。您可以使用官方 Angular CDK 中的 cdkTextareaAutosize。

https://material.angular.io/components/input/overview#auto-resizing-code-lt-textarea-gt-code-elements

在 angular 中调整 TextArea 的大小 5

ResizeTextArea in angular 5

textarea

autoresize

typescript

angular

angular5