带有外观轮廓的 mat-form-field 效果不佳答案

【问题标题】：mat-form-field with appearance outline doesn't work well带有外观轮廓的 mat-form-field 效果不佳
【发布时间】：2019-11-23 12:08:14
【问题描述】：

我将身体方向更改为 rtl。 dir="rtl"

而带有外观“轮廓”的 mat-form-field 效果不佳。

您可以在https://material.angular.io 站点、表单字段示例、表单字段外观变体部分中尝试它，并在堆栈上进行编辑，并将正文方向更改为 RTL。

你看哪个不正常

更新：

这个问题来自 Angular Material 并立即修复

【问题讨论】：

我根本看不到任何问题？这看起来更像是一个错误报告，我不确定 SO 是否适合放置它...

标签： angular typescript angular-material angular8 mat-form-field

【解决方案1】：

app.module

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

imports: [...
        BidiModule
    ...]

你的组件

<mat-form-field dir="rtl" appearance="outline">...</mat-form-field>

【讨论】：

【解决方案2】：

我对 RTL 的达里语（波斯语）也有同样的问题。我能找到的解决方法是将材料的版本和与角度相关的包设置为完全匹配，即从 package.json 中的包版本中删除 ^ 和 ~ 前缀。

我的 package.json 如下所示：

"dependencies": {
    "@angular-devkit/core": "8.0.6",
    "@angular/animations": "8.0.3",
    "@angular/cdk": "8.1.1",
    "@angular/common": "8.2.14",
    "@angular/compiler": "8.2.14",
    "@angular/core": "8.2.14",
    "@angular/flex-layout": "8.0.0-beta.26",
    "@angular/forms": "8.2.14",
    "@angular/http": "7.2.7",
    "@angular/material": "8.0.1",
    "@angular/material-moment-adapter": "5.0.0-rc.1",
    "@angular/platform-browser": "8.2.14",
    "@angular/platform-browser-dynamic": "8.2.14",
    "@angular/router": "8.2.14"
}

编辑 package.json 后，删除 package-lock.json 和 node_modules 并执行npm i

【讨论】：