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?

snorkpete · Accepted Answer · 2017-03-21 20:19:24Z

8

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)

answered Mar 21, 2017 at 20:19

snorkpete

14.6k3 gold badges43 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

A. Duff Over a year ago

I'm getting a No provider for FormControl! when I do that and I have FormsModule imported into my module. When I add FormControl to the providers part of my module, I get Syntax error Can't resolve all parameters for FormControl: (?, ?, ?). at SyntaxError.BaseError

snorkpete Over a year ago

Is your app divided into multiple NgModules?

A. Duff Over a year ago

Yes. I tried also importing my directive into the top AppModule, but it didn't take when I tried to use it, so instead I have a module which exports it, and then the module which applies it in the template is importing that module.

snorkpete Over a year ago

And which module is importing FormModule? Your AppModule, the module declaring MyHighlightDirective, the module containing the component using MyHighlightDirective or some other shared module that's just exporting?

A. Duff Over a year ago

MyHighlightDirective is importing it, and the module which has the input in its template is also importing it.

|

Naveen raj · Accepted Answer · 2017-04-27 06:34:07Z

6

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)=>{
       ...
    });
  }
};

answered Apr 27, 2017 at 6:34

Naveen raj

9311 gold badge11 silver badges18 bronze badges

Comments

Adrian Ber · Accepted Answer · 2018-12-04 14:47:01Z

0

What worked for me was

@ContentChild(NgModel)
public set model(model: NgModel) {
    ...
}

and you can access the control with model.control.

answered Dec 4, 2018 at 14:47

Adrian Ber

21.5k12 gold badges72 silver badges122 bronze badges

Collectives™ on Stack Overflow

Get form control from raw element in Angular2

3 Answers 3

12 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related