html - Angular Material 文本区域占位符和文本对齐问题

Question

我有一个 `textarea 的 Angular ，看起来如下:

在 Angular 上，我有:

<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;
}

这里有两个问题。

1. 本应 float 在 textarea 上方的 placeholder 没有看到。
2. textarea 中文本的开头(“This is dummy text”)移动到右侧。为什么会这样？

我做错了什么？

Answer 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 Material 文档 Float label never