角材质文本区域占位符和文本对齐问题

时间：2019-11-29 13:11:12

标签： html css angular sass angular-material

我有一个`textarea'，它的外观如下：

enter image description here

在角度上，我有：

<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. 没有看到应该悬浮在placeholder上方的textarea。
  2. textarea中的文本开头（“这是虚拟文本”）被移到右侧。为什么会这样？

我可能做错了什么？

2 个答案:

答案 0 :(得分：0)

这是因为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 Materiel Doc Float label never

答案 1 :(得分：0)

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