web-dev-qa-db-ja.com

「マット選択」を読み取り専用にする方法は？

私はangular 5プロジェクトに取り組んでいます。多くのmat-selectテキストボックスのように読み取り専用であることになっている要素。次のdisabled機能があることがわかりました。

  <mat-form-field>
    <mat-select placeholder="Choose an option" [disabled]="disableSelect.value">
      <mat-option value="option1">Option 1</mat-option>
      <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
      <mat-option value="option3">Option 3</mat-option>
    </mat-select>
  </mat-form-field>

出力は次のようになります。

enter image description here

テキストがフェードアウトし、下のライニングが変更されますが、読み取り専用にすることは可能ですか？

angularangular-materialangular5
9
Atul Stha

CSSをselectブロックとmat-form-fieldブロックの両方に追加します。これらはすべてのselect要素に自動的に適用できます。

<mat-form-field class="readonly-wrapper">
  <mat-select class="readonly-block" placeholder="Choose an option" [disabled]="disableSelect.value">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

CSSコード：

.readonly-wrapper {
    cursor: not-allowed;
}

.readonly-wrapper .readonly-block {
    pointer-events: none;
}
6
Prachi

編集可能な選択と読み取り専用のテキストボックスおよびそれらの間のngIfを組み合わせることができます。

  <mat-form-field>
    <mat-label>Choose an option</mat-label>
    <input *ngIf="!editing" mat-input formControlName="mySelect" [readonly]="true">
    <mat-select *ngIf="editing" formControlName="mySelect">
      <mat-option value="option1">Option 1</mat-option>
      <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
      <mat-option value="option3">Option 3</mat-option>
    </mat-select>
  </mat-form-field>
3
Markb