Angular2/material 2: md-input-container label is not resetting float when value is changed programattically

I'm having an issue using @angular/material's md-input-containers and reactive forms module.

I am making a login form with three md-inputs that are all tied to values using the FormBuilder's FormGroup. Everything there works fine.

My problem is that on the ngSubmit function, I am having the form reset if the credentials entered are invalid. Using the .reset() method of the FormGroup will reset the values to default, but the floating labels in the md-input-containers are not resetting to their original place, as they should be on an empty field. I am guessing the Material Design directives are looking for a blur event to update this but I can't tell, and I don't know how to force that to happen.

Here's the ngSubmit function:

  submitForm(username: string, password: string, companyID: any):void {

    this.userService.login(username, password, companyId)
      .then(() => {
      .catch(() => {

and upon the this.loginForm.reset() being called, the forms will reset to default (empty strings), but the labels will still float:

Labels still float. I reset Company ID for reference.

Any idea on how to fix this? I don't really want to invoke an ElementRef, though I have already tried doing so to force a blur and that didn't solve it.

Thanks so much in advance!


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


 ? Can TypeScript warn me about superfluous uses of the non-null assertion operator?
 ? How can I assign a click event to an element outside a directive?
 ? clearTimeout fails sporadically
 ? are global variables accessible in Angular 2 html template directly?
 ? Angular2: Passing Value from One Component to Another
 ? Inheritance TypeScript with exported class and modules
 ? TypeScript use typescript-require shared files
 ? Getting SublimeText2 to compile Typescript
 ? Typing Functions With Any Input in 0.9.5
 ? Mixing typescript definition files with nodejs require over multiple files in an internal module