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

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!

[jayoungers]

@devversion - with the upcoming work around adding types around ReactiveForms, is there any reason the ‘ReadOnly’ concept can’t be added to AbstractControl similar to enabled/disabled?

Currently we have a lot of controls that are ‘disabled’, but really they should be ‘readonly’: styled more inline with that specification (https://material.io/components/text-fields#input-types), and should show up in .value (opposed to needing to call getRawValue()

[jrkey]

I think it is important to understand that changing a read-only (or even a disabled) input to a shade of gray is a poor solution. Just because the value is read-only doesn’t mean it doesn’t need to be equally as legible as normal inputs. Gray text on a white background generally provides poor visual contrast making the text harder to read/view.

A read-only input should display as normal black text so it continues to be easy to see/read. The readonly input should display the label (bolded black text) and the associated value (regular black text) so they look like normal text that doesn’t provide any interaction (no icons, no drop-down arrows, background, underline, etc.).