Angular2 setting <textarea> as dirty when using placeholder text on IE 11

Question

I did some R & D on this issue, same issue occurred with Angular1 as well and mostly people suggested that use ng-attr-placeholder, but there is no fix for this issue in Angular2.

I am asking about Angular2 not Angular1.

Answer 1

I have found solution for this:

create a custom 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 thing is that it will set <textbox> back to pristine and it is achieved with setTimeOut. But for permanent solution angular team should look into it why IE is setting <textbox> to dirty.