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

Question

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(() => {
        this.router.navigate(['main']);
      })
      .catch(() => {
        this.loginForm.reset();
      })
    }

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.

Answer 1

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