当 mat-dialog 方向为 RTL 时，mat-radio-button 无法正常工作答案

【问题标题】：mat-radio-button doesn't work properly when mat-dialog direction is RTL当 mat-dialog 方向为 RTL 时，mat-radio-button 无法正常工作
【发布时间】：2020-03-31 19:07:40
【问题描述】：

我的问题是如何使用 RTL mat-dialog 中的 mat-radio-button？

详情如下：

当我将 Mat Dialog 配置更改为 RTL 时，如下所示：

  private showCreateOrEditDialog(id?: number): void {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.width="100%";
    dialogConfig.height="100%";
    dialogConfig.maxWidth='100vw';
    dialogConfig.maxHeight='100vh';
    dialogConfig.disableClose=true;
    dialogConfig.direction="rtl";  //<========= if I change it to ltr everything // working fine



    let createOrEditDialog;
    if (id === undefined || id <= 0) {
      createOrEditDialog = this._dialog.open(CreateComponent,dialogConfig);
    } else {
      createOrEditDialog = this._dialog.open(EditComponent, {
            data: id
        });
    }

    createOrEditDialog.afterClosed().subscribe(result => {
        // if (result) {
        //   this.rerender(Number(this.selecteddCity));
        // }
    });
  }

mat-radio-button 停止正常工作： 1- scroll-x 的第一件事就是扩展到下面的屏幕截图。

从我的表单中删除 mat-radio-buttons 时这个问题消失了

2- 第二件事我无法选择其中任何一个，两个 mat-radio-button 都没有选择，但是当我的表单处于 LTR 时，我可以选择其中一个，但在 RTL 方向上我不能。

这是我的角度：

<form autocomplete="off" #createModal="ngForm" (ngSubmit)="save()">
    <h1 mat-dialog-title>Create New </h1>
    <mat-dialog-content style="width: 100%;height:100%;">
      <mat-tab-group>
        <mat-tab [label]="'GeneralInformation' | localize">
            <div class="row"> 
<div class="col-md-4" >
  <mat-form-field >
  <mat-radio-group aria-label="Select an option" labelPosition="before"  name='Readiness'  required> 
      <mat-radio-button class='Readiness'  [value]="1" >ready</mat-radio-button>
      <mat-radio-button class='Readiness'  [value]="0" >not ready</mat-radio-button>
    </mat-radio-group>
    <label id="Readiness-ID">Readiness</label>
  </mat-form-field>
  </div>
</div>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
 <div mat-dialog-actions align="end">
      <button mat-button type="button" [disabled]="saving" (click)="close(false)">
        {{ "Cancel" | localize }}
      </button>
      <button
        mat-flat-button
        type="submit"
        flex="15"
        color="primary"
        [disabled]="!createModal.form.valid || saving">
       Save
      </button>
    </div>
  </form>

【问题讨论】：

标签： angular-material materialize

【解决方案1】：

我明白了。这是一个奇怪的问题，但是当我检查 materialize.css 文件时，我在 CSS 标记下方找到：

[type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

我所做的只是对它们进行了评论，并且一切正常！

/* Radio Buttons
   ========================================================================== */
/* [type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  left: -9999px;
  opacity: 0;
} */

更新：

Checkboxes 的类似问题，所以，你应该在 materialize.css 文件中的 css 下方评论：

/* [type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
  opacity: 0;
} */

注意：物化版本是Materialize v0.97.7 (http://materializecss.com)

【讨论】：