bug([mat-form-field]): Show asterix when required field is disabled

[popec]

Reproduction

https://stackblitz.com/edit/angular-ivy-mehbeg

Steps to reproduce:

1. Click on disable, this will disable form and asterix will disappear
2. Click on enable and asterix will be shown again

Expected Behavior

Only [required] attribute should control asterix (*)

Actual Behavior

asterix (*) depends on enabled/disabled state

Environment

• Angular: 9.1.4
• CDK/Material: 9.2.4
• Browser(s): Chrome 81
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[devversion]

It looks like this is not clearly communicated in the Material Design specification. Currently our form-field explicitly hides the required asterisk for disabled form fields as there is no action for users. i.e. how could they fill out this text field if the field is disabled.

It looks like the MDC text-field adds it regardless of disabled though: see this codepen. We should at least do the same for our MDC-based form-field that handles the asterisk manually (that potentially can be simplified too)

[devversion]

cc. @mmalerba do you have any thoughts on this?

[mmalerba]

I don't have a strong opinion about it, but we should probably just do the same thing MDC is doing for consistency