Search code examples
angular-material-5

Angular Material Input move placeholder on top when controls state is disabled

For angular material placeholder becomes a label when we enter value in the input control.

I am using my form for both view and edit mode. When in view mode I just disable the form so user can't edit it (based upon the user role and API takes care of it too)

However it looks pretty odd looking at control with placeholder text on it. Is there any CSS trick so that I can make placeholder value to be a label of that control and have the input shown as blank field (so it looks like no value is available for this control and placeholder actually becomes a label on the top)

Please advise

Solution

  • OK, I seems like my questions was not clear enough.

    I found the solution and was pretty easy.

    I used "floatLabel" attribute of mat-form-field and made is dynamic with form's disabled property.

    if the form is disabled placeholder will be become label even if the input has not value available.