关于angular：如何将“ mat-select”设为只读？


How to make a 'mat-select' readonly?

我正在做一个Angular 5项目。 有许多mat-select元素应该像文本框一样是只读的。 我发现有一个disabled功能是：

1
2
3
4
5
6
7
  <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

它淡出文本，下面的衬里得到更改，是否可以将其设置为只读？

相关讨论

将CSS添加到select块和mat-form-field块，它们可以自动应用于所有select元素：

1
2
3
4
5
6
7
<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代码：

1
2
3
4
5
6
7
.readonly-wrapper {
    cursor: not-allowed;
}

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

相关讨论

您可以将可编辑选择与只读文本框和ngIf结合在一起：

1
2
3
4
5
6
7
8
9
  <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>

相关讨论