So I'm trying to make a directive that can manipulate a FormControl.
It seems that if I use the long syntax for declaring form controls in the template instead, I can pass the control to a directive to do stuff with it as a direct @Input() bind; i.e.: With the following template:
<form [formGroup]="myForm">
<input type="text" id="myText" [formControl]="myForm.controls['myText']" my-directive>
</form>
And the following component logic:
@Component({
// Properties go here.
})
class MyComponent {
myForm: FormGroup;
constructor(fb: FormBuilder) {
// Constructor logic...
}
ngOnInit() {
this.myForm = this.fb.group({
"myText": [""]
});
}
}
The directive would look like:
@Directive({
selector: "[my-directive]"
})
class MyDirective {
Input() formControl: FormControl;
}
But if I were using the formControlName syntax in the template instead:
<form [formGroup]="myForm">
<input type="text" id="myText" formControlName="myText" my-directive>
</form>
How would I reference the (implicitly?) made FormControl in the directive?
[formControl] assigns a reference to the FormControl instance you created to the FormControlDirective . formControlName assigns a string for the forms module to look up the control by name.
FormControlNamelinkSyncs a FormControl in an existing FormGroup to a form control element by name.
If you utilize NgControl
, ElementRef
, HostListener
and constructor injection we can have a directive applicable to form controls from reactive forms in either formControlName
or [formControl]
guise and even template driven forms:
import { Directive, ElementRef, HostListener } from "@angular/core";
import { NgControl } from "@angular/forms";
@Directive({
selector: '[my-directive]'
})
export class MyDirective {
constructor(private el: ElementRef, private control : NgControl) { }
@HostListener('input',['$event']) onEvent($event){
let valueToTransform = this.el.nativeElement.value;
// do something with the valueToTransform
this.control.control.setValue(valueToTransform);
}
}
Here's an applicable demo
@silentsod answer would work flawlessly.
1. if you need to handle multiple events like key-press up/down or any other events, then you can go with below approach.
2. Also, it's better to define events in the directive itself.
import { Directive, ElementRef} from "@angular/core";
import { NgControl } from "@angular/forms";
@Directive({
selector: '[my-directive]',
host: {
'(input)':'onEvent($event)',
'(keydown.backspace)': 'onEvent($event, true)'
})
export class MyDirective {
constructor(private el: ElementRef, private control : NgControl) { }
public onEvent($event, someEvent){
let valueToTransform = this.el.nativeElement.value;
// do something with the valueToTransform
if(someEvent) {
//do something
}
this.control.control.setValue(valueToTransform);
}
}
In the Html
<form [formGroup]="myForm">
<input type="text" id="myText" formControlName="myText" my-directive>
</form>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With