在 IE 11 上使用占位符文本时，Angular2 将 <textarea> 设置为脏

Question

我在这个问题上做了一些研发，同样的问题也发生在 Angular1 上，大多数人建议使用 ng-attr-placeholder，但在 Angular2 中没有解决这个问题。

我问的是 Angular2 而不是 Angular1。

Answer 1

我已经找到解决办法:

为占位符文本创建自定义指令

TS:

import { Directive, ElementRef, Input } from '@angular/core';
import { NgControl } from "@angular/forms";
@Directive({
  selector: '[customPlaceholder]'
})
export class PlaceholderDirective {
  constructor(private el: ElementRef, private control : NgControl) { }
  @Input('customPlaceholder')
    public set defineInputType(pattern: string) {
        this.el.nativeElement.placeholder = pattern;
        setTimeout(() => {
            this.control.control.markAsPristine();
        }, 0);
    }
}

在你的 HTML 中

HTML:

<textarea type="text" customPlaceholder="Message" class="form-control" formControlName="message" rows="10" >
</textarea>

问题是它将设置 <textbox>回到原始状态，这是通过 setTimeOut 实现的。但是对于永久解决方案，angular 团队应该研究为什么 IE 设置 <textbox>弄脏。