Angular材料:如何正确对齐matInput占位符?

Aha*_*yon 8 angular-material angular

我有这个简单的代码:

<body style="direction: rtl; text-align: right">
    <mat-form-field>        
        <input matInput placeholder="Wanna be rtl" />
    </mat-form-field>
</body>
Run Code Online (Sandbox Code Playgroud)

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

Nar*_*arm 11

使用text-align的表单字段将工作:见工作StackBlitz例子

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

<body>
    <mat-form-field style="text-align: right">        
        <input matInput placeholder="Wanna be rtl" />
    </mat-form-field>
</body>
Run Code Online (Sandbox Code Playgroud)

结果: 在此输入图像描述

如果您只想将占位符与右侧对齐并保持输入文本左对齐,则添加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>
Run Code Online (Sandbox Code Playgroud)

结果: 在此输入图像描述