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

时间:2020-05-12 09:11:49

标签: angular typescript mat-form-field

[![在此处输入图像描述] [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>

2 个答案:

答案 0 :(得分:1)

overflow-y:scroll放在textarea css中,这不是一个角度问题,而是CSS问题,还要从父div中删除overflow-y: auto

答案 1 :(得分:1)

您是否尝试过matAutosizeMinRows和matAutosizeMaxRows

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