Angular2/material 2: метка md-input-container не сбрасывается с плавающей запятой, когда значение изменяется программно

Question

У меня возникла проблема с использованием @ angular/material's md-input-containers и модуля реактивных форм.

Я делаю форму для входа с тремя md-inputs, которые привязаны к значениям, используя FormBuilder's FormGroup. Все там прекрасно работает.

Моя проблема в том, что в функции ngSubmit у меня есть форма сброса, если введенные учетные данные недействительны. Использование метода .reset()FormGroup сбрасывает значения по умолчанию, но плавающие метки в md-input-containers не возвращаются в исходное место, так как они должны находиться в пустом поле. Я предполагаю, что директивы Material Design ищут событие размытия, чтобы обновить это, но я не могу сказать, и я не знаю, как заставить это произойти.

Вот ngSubmit функция:

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

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

и на this.loginForm.reset() называют, формы будут сброшены по умолчанию (пустые строки), но метки будут еще плавать:

Labels still float. I reset Company ID for reference.

Любая идея о том, как это исправить? Я действительно не хочу ссылаться на ElementRef, хотя я уже пытался сделать это, чтобы вызвать размытие, и это не решило его.

Answer 1

Попробуйте использовать md-input control вместо ввода, заключенного в md-input-контейнер. Это сработало для меня.