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 上制作 sample ，但是 Material UI 甚至没有在那里正确显示 - 可以吗？仍然希望它有助于澄清我的问题。

Answer 1

如果我理解正确你的问题，你可以在你的 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>