Get form control from raw element in Angular2

Question

Let's say I'm writing a custom attribute directive for use on Angular2 form elements. I want to be able to use my attribute like so:

<form [formGroup]="myFormGroup">
  <input type="text" [myHighlight] formControlName="name" />
</form>

Inside my directive I have something like this:

@Directive({selector: '[myHighlight]'})
export class MyHighlightDirective {
  constructor (private el: ElementRef) {
    this.el.nativeElement.style.backgroundColor = 'yellow';
  }
};

But now let's say I want to do something on all changes to the input control. Maybe I want to randomize the color on each change.

The HostListener('onChange') event from the Angular2 guide works when the user is typing into the input box. But it doesn't get activated for setValue events that are called on the form control, even with emitEvent set to true. The Angular docs on Forms say that setValue will cause a valueChanges event to be emitted on the form control object. But I don't want to have to pass this in to the directive every time I use it, as that's clunky.

Is there any other way for the directive to get access to the original form control, given that it just has the element reference?

Answer 1

Angular DI to the rescue!

You can use the Angular Dependency Injection system to inject the FormControl attached to the host element of your directive.

@Directive({selector: '[myHighlight]'})
export class MyHighlightDirective {
  constructor (private el: ElementRef, private formControl: FormControl) {
    // have fun with formControl.valueChanges
    .......

  }
};

Why this works:

Angular registers directives into the injector of the element to which the directive is attached. So, when you ask for an instance of a particular directive, the first lookup will be on the host element first. (The same thing applies to components)

Answer 2

Inject NgControl which is type of FormControlName

import { NgControl } from '@angular/forms';

@Directive({selector: '[myHighlight]'})
export class MyHighlightDirective {
  constructor (private el: ElementRef, private formControl: NgControl) {
    this.el.nativeElement.style.backgroundColor = 'yellow';
    ....
    //listen to validation status
    this.formControl.statusChanges.subscribe((state)=>{
       ...
    });
  }
};