Angular Material UI TextArea 填充高度/宽度

Question

使用 Angular v11 和 Angular Material Form field 如何让 textarea mat-form-field 占据容器的整个空间（在我键入时不会自动增长，但即使是空的也要填充空间）？它应该是仅使用 CSS 的动态解决方案，因此页面大小调整时，文本字段也会调整。

这里是pic of actual page I'm working on。我试图在stackblitz 上制作样本，但是 Material UI 甚至没有在那里正确显示 - 可以吗？仍然希望它有助于澄清我的问题。

Answer 1

我最终找到了完全动态的解决方案，无需使用 calc 或任何硬编码调整（请注意，您可以在 textarea 上方的部分中添加内容并动态调整大小），请参阅stackblitz。 使它工作的关键之一是这个 CSS，我不太明白：

*,
::after,
::before {
  box-sizing: border-box;
}

Answer 2

如果我正确理解您的问题，您可以在 style.css 文件中添加此 CSS。并将 fill-container 添加到 mat-form 字段元素中

.mat-form-field.fill-container,
.mat-form-field.fill-container .mat-form-field-infix,
.mat-form-field.fill-container .mat-form-field-flex,
.mat-form-field.fill-container .mat-form-field-wrapper {
  height: 100%;
  width: 100%;
}

.mat-form-field.fill-container textarea {
  height: calc(100% - 25px);
}

在模板中

<mat-form-field appearance="fill" class="fill-container">
    <mat-label>Textarea</mat-label>
    <textarea matInput [matTextareaAutosize]="false"></textarea>
</mat-form-field>

这里是 stackblitz 示例。 https://stackblitz.com/edit/angular-9ms3ph?file=src/app/form-field-overview-example.html

另外，如果你可以使用matTextareaAutosize 代替这种风格，我推荐使用这个@Input 属性

这样

<div>
  
  <mat-form-field appearance="fill" class="test">
    <mat-label>Textarea</mat-label>
    <textarea matInput [matTextareaAutosize]="true"></textarea>
  </mat-form-field>

</div>

Answer 3

我知道这样做不是一个好主意，但可以尝试一下

<div #parent>

  <!-- ... other elements -->

  <mat-form-field class="textarea-mat-field">
     <mat-label>Text Content</mat-label>
     <textarea 
      matInput  
      placeholder="Enter document text..." 
      #newTextContent
      style="height: {{parent.offsetHeight - newTextContent.getBoundingClientRect().top}}px"></textarea>
  </mat-form-field>
</div>