Angular Material 文本区域占位符和文本对齐问题答案

【问题标题】：Angular Material Text-area Placeholder and text alignment issueAngular Material 文本区域占位符和文本对齐问题
【发布时间】：2021-03-03 10:37:02
【问题描述】：

我有一个角度的`textarea，如下所示：

角度来说，我有：

<div *ngIf="whetherDisplay()" class="textarea-text">
  <mat-form-field appearance="outline" >
     <textarea matInput name="myTextarea" disabled class="myTextarea" rows="3" 
                      placeholder="This is a placeholder">
         {{ ttsText }}
      </textarea>
   </mat-form-field>
</div>

css:

.greeting-tts-text {
    width: 65%;
    margin: 5px auto 0 auto;
}

这里有两个问题。

没有看到应该漂浮在textarea上方的placeholder。
textarea（“这是虚拟文本”）中文本的开头移到右侧。为什么会这样？

我做错了什么？

【问题讨论】：

标签： html css angular sass angular-material

【解决方案1】：

这是因为您在textarea 中没有标签，因此您需要像这样的floatLabel="never"

   <mat-form-field appearance="outline" floatLabel="never" class="display-block">
        <textarea rows="3" matInput placeholder="Type here..." disabled></textarea>
   </mat-form-field>

来自 Angular 材料文档Float label never

【讨论】：

【解决方案2】：

只需删除 {{}} 标签并在您的 textarea 标签内添加 [(ngModel)]="ttsText"。

【讨论】：