Place holder issue with setValue

[csyperski]

Bug, feature request, or proposal:

I am having an issue with Angular2's material components when a component is updated via setValue. Here is the plnkr....

https://embed.plnkr.co/lZhHJKBhuldUqzUt9Q18/

You can see that the value and the placeholder are both occupying the same space.

With the setTimeout, I'm emulated an ajax fetch that would populate the form asynchronously. Am I doing something wrong or is this a bug with ng2's material module or user error?

What is the expected behavior?

The placeholder text should move above the input field

What is the current behavior?

The placeholder text and the input text occupy the same space

What are the steps to reproduce?

https://embed.plnkr.co/lZhHJKBhuldUqzUt9Q18/

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

Expected end-user behaviour

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

Angular 2.4.1
angular/material 2.0.0-beta.1

Is there anything else we should know?

[dahaupt]

@csyperski This issue was fixed with #2455. I think it is just not released in a new npm package.

[csyperski]

@dahaupt Thanks, I didn't see that bug in my searching.

[mariohmol]

Still having this issue in .beta10 version =(

[willshowell]

@mariohmol can you file a new issue with a reproduction?

[mariohmol]

no sorry.. running out of time =(

but i have a normal form and a patchValue. (i'm using angular-ssr but this happens with normal ng serve as well)

What i did to fix is having an empty space as default value for each field city[' '] instead of city['']

ngOnInit() {
this.orderFormFields = {
                package: [' '],
                city: [' ', [<any>Validators.required, <any>Validators.minLength(5)]],
                packing: [' '],
                products: this.fb.array([]),
            };
            this.orderForm = this.fb.group(this.orderFormFields);

     (<FormGroup>this.orderForm).patchValue(StoreComponent.formData, { onlySelf: true });
}

[gise88]

I am having the same issue with the beta10 version too!
I have workaround this with a:

// use the ChangeDetectorRef
constructor(private changeDetectorRef: ChangeDetectorRef) {}

// and force the detection
this.titleFormContol.setValue('my title');
this.changeDetectorRef.detectChanges();

Hope it helps @mariohmol

@willshowell I have tried to create a plunker to reproduce this issue but I have failed after an hour or so of attempts.. 😕
The only input that I can give to you is that I have used the google.maps.Geocoder to retrieve the street from some coordinates.. When the response arrives I set the result that I need into the titleFormControl using the setValue! Nothing weird, I believe..

[mariohmol]

@gise88 if you comment this.titleFormContol.setValue('my title');... does it shows the placeholder correctly?

[gise88]

Yep, and it floats correctly.. Remember to set the initial value to '' and not to ' '

[mariohmol]

awesome!!!! i will give a try!

[mariohmol]

Hi @gise88 , in a project with new angular2 material (beta11) it works without the ChangeDetector.

In case the project i had with beta10 , the issue persists.. will try to refactor this project with beta11 to see if this fixes it

[mariohmol]

Hi, still having this issue with beta11.

Now even with a space in the initial value is not working.

 makeForm() {
        this.callFormFields = {
            _id: [''],
            device: [''],
            message: [''],
            answer: [''],
            phone: ['']
        };
        this.callForm = this.fb.group(this.callFormFields);
        this.changeDetectorRef.detectChanges();
    } 

[mariohmol]

Check it out.. maybe better to move to that issue #7601 (comment)

[mariohmol]

beta12 working!!!