angular - 角度引导自定义输入材料布局不起作用

Question

我在我的角度项目中创建了一个与材质输入设计相同的输入。除了在 IE-11 中它工作正常。为了解决 IE-11 问题，我创建了一个 Angular 指令并通过添加到父元素的类来改变行为。它在所有浏览器中都可以正常工作，但有时不能完美运行。在指令中，我检查值是否不为空或不为空，然后在父 div 中添加一个“input-focused”类。当浏览器自动填充输入时，标签不会像材料一样移动到顶部。如果我点击页面，它就会移动。

谁能帮我解决这个问题，这里是我的代码片段和输出：

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); 
  }
}

标签： angulartypescriptbootstrap-4autofill