feat(inputs): Add `[readonly]` property to input components

[e-oz]

Feature Description

Right now input components (checkbox, chips, datepicker, form field, radio button, select, slider) have [disabled] property. Only matInput directive has [readonly].

[disabled] property conflicts with the [formControl] directive, which has a property with the same name.

So if you use [formControl] with the components listed above, it is not possible to use their [disabled] property.

Use Case

[disabled] controls will not be included in form.value - sometimes you need to render an input element as read-only but still send its value to the server.

[crisbeto]

You shouldn't have to use the disabled binding if you're using reactive forms, the disabled state will be picked up from the form control automatically.

[e-oz]

But [disabled] it's not what I want. Please see "Use Case" part.

[crisbeto]

You can already mark inputs as readonly. See https://stackblitz.com/edit/ycus6x?file=src%2Fexample%2Fform-field-overview-example.html

[e-oz]

I've mentioned it.

Could you please show me how I can mark the components checkbox, chips, datepicker, radio button, select or slider as readonly?

[json-derulo]

You can use form.getRawValue() to include disabled controls.

<input readonly> is not something which Angular Material offers, it's part of the native HTML input element, see the docs. When used with a matInput, the field looks quite weird to me. It can be focused, it changes background and cursor on hover, even the label floats when clicking the field. It does not look like a readonly field at all. For proper support, Angular Material would need to style readonly fields accordingly.

[e-oz]

That's exactly what I’m asking for in this feature request, @json-derulo

[POFerro]

+1 For this feature, one thing is the disabled prop which excludes the formControl from the form and stops it from reporting validation errors other thing is a control prevented from user interaction but is still required in the form to submit and reports to form validity ( readonly ).
I need this badly and still can't figure out how to make a mat-select for example unchangeable to the user but report it's errors do the form.
Standard html has this property in it's input element for a reason, that consistency should be maintained across all input elements.

[hasokeric]

Also styling would be supported if they added mat-form-field-readonly

Current workaround:

  /* Disabled */
  &.mat-form-field-disabled {
      opacity: 0.7 !important;
  }

  /* Readonly */
  .mdc-text-field--outlined .mdc-text-field__input[readonly],
  textarea.mdc-text-field__input[readonly] {
      @apply bg-gray-100 dark:bg-gray-700 #{'!important'};
  }

  .mdc-text-field:has(.mdc-text-field__input[readonly]) {
    @apply bg-gray-100 dark:bg-gray-700 #{'!important'};
  }