angular / angular/components

Readonly CSS Styling: MatFormField should reflect css class 'mat-form-field-readonly' similar to 'mat-form-field-disabled'

Ouverte
#15,809 11 commentaires 30 réactions 0 personnes assignées Voir sur GitHub
area: material/form-field feature P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

#### Please describe the feature you would like to request.

The MatFormField component reflects a disabled MatInput directive via a dynamic css class 'mat-form-field-disabled'.

I suggest to implement a dynamic css class 'mat-form-field-readonly' similar to 'mat-form-field-disabled' which reflects the readonly state of the MatInput directive.

#### What is the use-case or motivation for this proposal?

My proposal would support better css styling. Eg. styling the child 'mat-form-field-underline' of the MatFormField (which is not a dom child of the MatInput directive).

#### Is there anything else we should know?

No special css styling is required to be implemented by you. Only the possibility to implement one by myself.

#### Temporary Workaround

Helper directive (ts):
```
import { Directive, Input, HostBinding } from '@angular/core';
import { MatFormField, MatInput } from '@angular/material';

/* Workaround to provide css class 'mat-form-field-readonly' similiar to 'mat-form-field-disabled'.
* Example Usage:
*
*
*
*/
@Directive({
selector: 'mat-form-field[provideReadonly]',
host: {
'[class.mat-form-field-readonly]': 'isReadonlyInput()'
}
})
export class ProvideMatFormFieldReadonlyDirective {
constructor(private _matFormField: MatFormField) { }

public isReadonlyInput(): boolean {
const ctrl = this._matFormField._control;
if (ctrl instanceof MatInput) {
return ctrl.readonly;
}
return false;
}
}
```

The directive must be assigned explicitly (html):
```

```

Which can be styled for example (css):
```
/* mat-form-field / matInput - readonly support */
.mat-form-field-appearance-legacy.mat-form-field-readonly .mat-form-field-underline {
background-color: rgba(127, 127, 127, 0.25);
}
```

Thank You!

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par localiser l’intégration MatFormField/MatInput qui reflète actuellement la classe mat-form-field-disabled et examinez comment l’état readonly de MatInput est exposé. Confirmez le comportement attendu pour les inputs readonly, puis assurez-vous que MatFormField le reflète avec mat-form-field-readonly afin que le style de ses éléments enfants puisse être personnalisé.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.