Readonly CSS Styling: MatFormField should reflect css class 'mat-form-field-readonly' similar to 'mat-form-field-disabled'
- Lenguaje dominante
- TypeScript
- Estrellas
- 25k
- Forks
- 6.8k
- Merge medio
- 1 d 8 h
- PR fusionados (30 d)
- 91
Descripción
#### 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!
Guía de contribución
Línea de trabajo
Comienza localizando la integración de MatFormField/MatInput que actualmente refleja la clase mat-form-field-disabled e inspecciona cómo se expone el estado readonly de MatInput. Confirma el comportamiento esperado para los inputs readonly y, después, asegúrate de que MatFormField lo refleje con mat-form-field-readonly para que se pueda personalizar el estilo de sus elementos secundarios.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- angular, typescript
- Área
- frontend
- Tipo de issue
- Nueva funcionalidad
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100