Angular2 / material 2: label md-input-container does not reset float when value changes programmatically

Question

I have a problem using @ angular / material md-input-containers and reactive forms module.

I am making a registration form with three md-inputs that are value bound using FormBuilder FormGroup . Everything there works great.

My problem is that in the ngSubmit function, I have a reset form if the credentials entered are invalid. Using the .reset() method for FormGroup will reset to default values, but floating labels in md-input-containers do not return to their original location, since they should be in an empty field. I assume that the Material Design directives are looking for a blur event to update this, but I cannot say, and I do not know, how to make this happen.

Here's the ngSubmit function:

  submitForm(username: string, password: string, companyID: any):void { this.userService.login(username, password, companyId) .then(() => { this.router.navigate(['main']); }) .catch(() => { this.loginForm.reset(); }) } 

and when calling this.loginForm.reset() forms will reset to default (empty lines), but the labels will still float:

Shortcuts are still floating. I reset the company id for reference.

Any idea on how to fix this? I really do not want to call ElementRef , although I already tried to do this to cause blur, and this did not solve it.

Answer 1

Try using md-input control instead of the input enclosed in md-input-container. It worked for me.