Is it possible to get native element for formControl?
I've got Angular reactive form. I created formControl
s 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()
Solution 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...
Solution 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