Angular bootstrap пользовательский макет материала ввода не работает

Question

Я создал ввод в стиле, аналогичном дизайну ввода материала в моем проекте angular. Работает нормально за исключением IE -11. Чтобы решить проблему IE -11, я создал директиву Angular и изменил поведение, добавив класс в родительский элемент. Он отлично работает во всех браузерах, но иногда не работает идеально. Внутри директивы я проверяю, является ли значение не пустым или не нулевым, затем добавляю класс 'input-focused' в родительский div. Когда ввод автоматически заполняется браузером, метки не перемещаются вверх, как материал. Если я нажимаю на страницу, то она перемещается.

Может кто-нибудь помочь мне решить эту проблему, вот мой фрагмент кода и вывод:

HTML вход

<div class="group">
    <input type="text" required="required" autocomplete="off" formControlName="email" appAutoFocusElement />
    <label **ngIf="email.error">Error message</label>
</div>

Директива

import { AfterContentInit, Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appAutoFocusElement]'
})
export class AutoFocusDirective implements AfterContentInit {
  @Input() public appAutoFocusElement: boolean;
  public constructor(private el: ElementRef) { }

  // find the prent element until find parent
  public getParentsElement = (elem, selector) => {
    for (; elem && elem !== document; elem = elem.parentNode) {
      if (elem.matches(selector)) { return elem; }
    }
    return null;
  }

  public ngAfterContentInit() {
    // check the if metch
    const parentElementfindResult = this.getParentsElement(this.el.nativeElement, '.group');

    setTimeout(() => {
      // on load set focus in parent
      if (this.el.nativeElement.value !== '' || this.el.nativeElement.value !== null) {
        if (parentElementfindResult === null || parentElementfindResult === undefined) { return; }
        parentElementfindResult.classList.add('input-focused');
      }

      // add in specific input focus depend on class 'first-focus'
      if (this.el.nativeElement.classList.contains('first-focus')) {
        this.el.nativeElement.focus();
      }

      this.el.nativeElement.addEventListener('focusin', () => {
        if (parentElementfindResult === null || parentElementfindResult === undefined) { return; }
        parentElementfindResult.classList.add('input-focused');
      });

      // when unfocus
      this.el.nativeElement.addEventListener('blur', () => {
        if (parentElementfindResult === null || parentElementfindResult === undefined) { return; }
        if (this.el.nativeElement.value !== '') {
          parentElementfindResult.classList.add('input-focused');
        } else {
          parentElementfindResult.classList.remove('input-focused');
        }
      });
    }, 500); 
  }
}