Components: [Input] Placeholder hidden under input

[maknik]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

label.mat-form-field-label has class ".mat-empty.mat-form-field-empty" when input is empty and doesn't have this class when input is filled

What is the current behavior?

sometimes labels related to empty fields don't have ".mat-empty.mat-form-field-empty" class

What are the steps to reproduce?

Create FormGroup with empty fields. Do .patchValue() to fill the form with values (now not empty inputs have .mat-empty class in labels). Focus on any field (now .mat-empty class is removed) and do .reset() on FormGroup. .mat-empty class is not present and placeholder is not visible.

What is the use-case or motivation for changing an existing behavior?

Visible placeholder for input with no value

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material: 5.0.1
Angular: 5.0.3
Typescript: 2.6.2

OS: Ubuntu 14.04
Chrome: 56 and 62, Firefox: 57

Is there anything else we should know?

Someone reported this in bug #3196 (closed), but I was not missing the DOCTYPE in my index.html, nor am I missing the BrowserAnimationsModule.

[codemental]

@maknik Thanks for opening this bug. I have reposted my message from #3196 here for consistency.

I have the exact same situation. I have a form inside a mat-card-content like this:

<mat-card-content>
    <form [formGroup]="formGroup">
      ...
    </form>
</mat-card-content>

If the form shows some data and afterwards I clear it with an empty object like this:

let location: Location = new Location();

this.formGroup = new FormGroup({
      id: new FormControl(location.id),
      created: new FormControl(location.created),
      name: new FormControl(location.name, Validators.required),
...

the form looks like this:

instead of this:

If I refresh the app (F5) the form appears correctly. This problem only appears if I navigate to it from somewhere else.

I have the _doctype_ declaration and the _BrowserAnimationsModule_ import.

Angular: 5.0.5
Material: 5.0.0
OS: Linux Ubuntu 17.10
Browsers: Latest Firefox Quantum: Developer Edition and latest Chrome.

[benb7760]

@maknik @codemental are either of you able to reproduce this in a plunker/stackblitz?

[codemental]

@benb7760 Sorry that I've replied so late. I haven't forgotten about this. I will try to reproduce the problem and post a link.

[joshuaohana]

I am experiencing the exact same issue as @codemental
I have an input inside a form

<form>
   <mat-form-field>
       <input matInput placeholder="placeholder">
...

On first view it works great. Through an app specific process we clear and rebuild the form. On second view the placeholders are gone. If I click into the field then they show up and float above just as expected.

Due to the awkwardness of my setup I haven't been able to reproduce in plunker. I have tried all solutions from the original bug report on 3196 to no avail.

[mmalerba]

Can anyone who is experiencing this issue reproduce in stackblitz or plunker? I've created one for the code provided by @codemental and it seems to work fine: https://stackblitz.com/edit/angular-material2-issue-lkcrw7?file=app/app.component.ts

[codemental]

Thank you (a lot actually :D ) @mmalerba for making the stackblitz template. I've cloned it and reproduced the bug here: https://angular-material2-issue-8970.stackblitz.io.

When the app opens just click on 'Load Location', the form appears. Then just select any of the form fields, after which click 'New Location'. I have just tested this on Chrome and Firefox.

[kevin-work]

A really hacky workaround is to use change detection to force it to re-render as a temporary fix.

[mmalerba]

Ah, this is because you're actually replacing the FormControl instances with brand new ones. Instead you should update the values of the existing ones: https://stackblitz.com/edit/angular-material2-issue-8970-cyew5p?file=app/location/location-form.component.ts

[kamok]

@mmalerba Is there no way to replace FormControl instances? I have multiple ngModels, and I've created an Array of FormControl for each of them. This allows me to check .valid for each of the formControl, instead of using template driven form (which would require a valid method on the ngModel), as well as standard Template driven validations.

Using patchValue would require me to strip the formControl.value, insert into model, and take the new model, and patchValue into the formControl.

[kamok]

Really hacky solution that I came up with is to add <mat-form-field floatLabel="always">
This way, I can swap out the formGroup like such:
<form [formGroup]="selectedFormGroup">, and have multiple formGroups that I swap out with a button.

[mmalerba]

I don't think there's a good way to do it. We subscribe to the valueChanges stream on the FormControl to know when to do change detection. When you swap it out like that we're left listening to the old stream. @kara do you have any suggestions for this?

[dhananshan]

easy fix could be applying the below in your global CSS file. This will overwrite the

mat-form-field-placeholder

.mat-form-field-placeholder {
    display:block !important;
}

[vkurakula]

how can we get space in mat input placeholder??

That mat input place holder (start date) should align left

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}