web-dev-qa-db-fra.com

Comment faire un 'mat-select' en lecture seule?

Je travaille sur un projet angular 5. Il existe de nombreux mat-select éléments censés être en lecture seule comme des zones de texte. J'ai découvert qu'il existe une fonction disabled qui est:

  <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>

ce qui ressemble à:

enter image description here

Il efface le texte et la doublure ci-dessous obtient des modifications, est-il possible de le faire en lecture seule?

angularangular-materialangular5
9
Atul Stha

Ajoutez du CSS au bloc de sélection et au bloc de champ mat-form, ceux-ci peuvent être appliqués automatiquement à tous les éléments de sélection:

<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>

code CSS:

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

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

Vous pouvez combiner une sélection modifiable avec une zone de texte en lecture seule et ngIf entre les deux:

  <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