Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
gerhard17 opened this Issue Apr 13, 2019 · 0 comments

Comments

Projects
None yet
2 participants
@gerhard17
Copy link

gerhard17 commented Apr 13, 2019

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:
 *	<mat-form-field provideReadonly>
 *		<input matInput placeholder="Readonly Input" readonly="true" value="Some Value">
 *	</mat-form-field>
 */
@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):

<mat-form-field provideReadonly>
 	<input matInput placeholder="Readonly Input" readonly="true" value="Some Value">
</mat-form-field>

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!

@gerhard17 gerhard17 changed the title CSS Styling: MatFormField should reflect css class mat-form-field-readonly similar to mat-form-field-disabled Readonly CSS Styling: MatFormField should reflect css class mat-form-field-readonly similar to mat-form-field-disabled Apr 13, 2019

@gerhard17 gerhard17 changed the title Readonly CSS Styling: MatFormField should reflect css class mat-form-field-readonly similar to mat-form-field-disabled Readonly CSS Styling: MatFormField should reflect css class 'mat-form-field-readonly' similar to 'mat-form-field-disabled' Apr 13, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.