角度自动调整文本区域的大小

Question

[！[在此处输入图像描述][1]][1]我想将最大高度设置为文本区域，以便当用户继续添加文本时，如果达到最大高度，它将添加滚动。但是我目前的实现是它划线模态，所以如果我添加更多文本，模态就会变得太长。

我们如何使模态不会被划线？谢谢。

.html

<div fxLayout="row" fxLayoutAlign="start start" class="full-width question-text" fxLayoutGap="12px">
<mat-form-field style="height: auto; overflow: hidden;" class="pr-4" appearance="outline">
<mat-label>Comments</mat-label>
<div
style="
margin-right: 10px;
overflow-y: auto;
height: auto;
max-height: 200px;
"
>
<textarea cdkTextareaAutosize
matTextareaAutosize
matInput
formControlName="comment"
[required]="isCommentRequired()"
></textarea>
</div>

Answer 1

overflow-y:scroll把它放在textarea css中，这不是一个角度问题，而是一个CSS问题，也从父div中删除overflow-y: auto。

Answer 2

你有没有尝试过matAutosizeMinRows和matAutosizeMaxRows

<textarea matInput
matTextareaAutosize
[matAutosizeMinRows]="min"
[matAutosizeMaxRows]="max"></textarea>
</mat-form-field>

Answer 3

我在 Angular Material 的文档 (13.3.2( 中找到了这一点

在组件中：

import {CdkTextareaAutosize} from '@angular/cdk/text-field';
import {Component, NgZone, ViewChild} from '@angular/core';
import {take} from 'rxjs/operators';
@Component({
selector: 'text-field-autosize-textarea-example',
templateUrl: './text-field-autosize-textarea-example.html',
styleUrls: ['./text-field-autosize-textarea-example.css'],
})
export class TextFieldAutosizeTextareaExample {
constructor(private _ngZone: NgZone) {}
@ViewChild('autosize') autosize: CdkTextareaAutosize;
triggerResize() {
// Wait for changes to be applied, then trigger textarea resize.
this._ngZone.onStable.pipe(take(1)).subscribe(() => this.autosize.resizeToFitContent(true));
}
}

在模板中：

<mat-form-field appearance="fill">
<mat-label>Autosize textarea</mat-label>
<textarea matInput
cdkTextareaAutosize
#autosize="cdkTextareaAutosize"
cdkAutosizeMinRows="1"
cdkAutosizeMaxRows="5"></textarea>
</mat-form-field>