Angular2 setting <textarea> as messy when using placeholder text in IE 11

I found a solution for this:

create custon directive for placeholder text

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

      

        
        
        
      

    

and in your HTML

HTML:

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

      

        
        
        
      

    

The point is that it will revert to its original state <textbox>

and this will be achieved using setTimeOut. But for a permanent solution, the angular team has to look into it because IE sets <textbox>

to dirty.