Is it possible to get native element for formControl?

Question

I've got Angular reactive form. I created formControls and assigned it to input fields by[formControl]=.... As I understand it creates nativeElement <-> formControl link.

My question: is it possible to get nativeElement for formControl? I want to do something like myFormControl.nativeElement.focus()

Answer 1

The code below does not work with pure ngModel binding, so I did a lot of experiments. Latest, also confirmed by Maximillian Schwarzmuller should be the one:

@Directive({     selector: '[ngModel], [formControl]', // or 'input, select, textarea' - but then your controls won't be handled and also checking for undefined would be necessary }) export class NativeElementInjectorDirective {     constructor(private el: ElementRef, private control : NgControl, @Optional() private model : NgModel) {         if (!! model)             (<any>model.control).nativeElement = el.nativeElement;         else             (<any>control).nativeElement = el.nativeElement;     } } 

So if this directive is provided and exported in the main module, it will attach a custom nativeElement property to all FormControl.

It's a shame it's not coming out-of-the box...

Answer 2

I can share one terrible solution but it works for me.

In reactive forms we can use either

1) FormControlDirective

ts

myControl = new FormControl('') 

template

<input type="text" [formControl]="myControl"> 

or

2) FormControlName

ts

myForm: FormGroup;  constructor(private fb: FormBuilder) {}  ngOnInit() {   this.myForm = this.fb.group({     foo: ''   }); } 

template

<form [formGroup]="myForm">   <input type="text" formControlName="foo"> </form> 

So for these directives i could write some patch like

1) FormControlDirective

const originFormControlNgOnChanges = FormControlDirective.prototype.ngOnChanges; FormControlDirective.prototype.ngOnChanges = function() {   this.form.nativeElement = this.valueAccessor._elementRef.nativeElement;   return originFormControlNgOnChanges.apply(this, arguments); }; 

2) FormControlName

const originFormControlNameNgOnChanges = FormControlName.prototype.ngOnChanges; FormControlName.prototype.ngOnChanges = function() {   const result =  originFormControlNameNgOnChanges.apply(this, arguments);   this.control.nativeElement = this.valueAccessor._elementRef.nativeElement;   return result; }; 

After that we can easily access to native element having FormControl instance

1) FormControlDirective

focusToFormControl() {   (<any>this.myControl).nativeElement.focus(); } 

2) FormControlName

focusToFormControlName(name) {   (<any>this.myForm.get(name)).nativeElement.focus(); } 

Plunker Example