Angular材料：如何正确对齐matInput占位符？

Question

我有这个简单的代码：

<body style="direction: rtl; text-align: right">
    <mat-form-field>        
        <input matInput placeholder="Wanna be rtl" />
    </mat-form-field>
</body>

但无论我想要什么，占位符都保持从左到右。 有没有办法让它与右边对齐？

Answer 1

在表单字段上使用text-align将起作用：请参阅StackBlitz示例

此解决方案将占位符和输入文本对齐到右侧：

<body>
    <mat-form-field style="text-align: right">        
        <input matInput placeholder="Wanna be rtl" />
    </mat-form-field>
</body>

结果：

如果您只想将占位符对齐并保持输入文本左对齐，则将style="text-align: left"到输入中，如下所示

<body>
    <mat-form-field style="text-align: right">        
        <input matInput placeholder="Wanna be rtl" style="text-align: left"/>
    </mat-form-field>
</body>

结果：

Answer 2

过了一段时间我遇到了mat-form-field的sass，我发现如果mat-form-field的父mat-form-field有dir="rtl"属性，它就像rtl一样：

<body dir="rtl">
   <mat-form-field>        
       <input matInput placeholder="I am rtl" />
   </mat-form-field>
</body>

Answer 3

使用CDK中的双向性模块：

import {BidiModule} from '@angular/cdk/bidi';

...

<body dir="rtl">
    <mat-form-field>        
        <input matInput placeholder="I am RTL" />
    </mat-form-field>
</body>

Angular材料：如何正确对齐matInput占位符？

问题描述

3 个解决方案

解决方案1
11 已采纳 2018-07-11 15:32:22

解决方案2
1 2018-07-30 10:00:48

解决方案3
0 2018-07-11 15:49:19

Angular材料：如何正确对齐matInput占位符？

问题描述

3 个解决方案

解决方案1 11 已采纳 2018-07-11 15:32:22

解决方案2 1 2018-07-30 10:00:48

解决方案3 0 2018-07-11 15:49:19

解决方案1
11 已采纳 2018-07-11 15:32:22

解决方案2
1 2018-07-30 10:00:48

解决方案3
0 2018-07-11 15:49:19