I use a reactive form. My input is binded to a control and to a directive which format the control value (and thus the input value).
At some point I use the method myInputControl.reset(myValue)
, so I want the directive to be triggered in order to format myValue
, but I can not find the right listener to use in the directive. The listeners I have tried are listed below :
export class MyDirective implements OnInit {
constructor(public ngControl: NgControl) {
}
ngOnInit(): void {
this.ngControl.valueChanges.subscribe(() => { // Never fired
this.format(this.ngControl.value);
});
this.ngControl.control.valueChanges.subscribe(() => { // Never fired
this.format(this.ngControl.value);
});
this.ngControl.valueAccessor.registerOnChange(() => { // Never fired
this.format(this.ngControl.value);
});
}
@HostListener('ngModelChange', ['$event']) // Fired when manually changing the input value, but before "input" event
onNgModelChange(event) {
this.format(event);
}
@HostListener('input', ["$event.target.value"]) // Fired when manually changing the input value
onInput(value: string) {
this.format(value);
}
@HostListener('change') // Fired when focusing out but before "focusout" event
onChange() {
this.format(this.ngControl.value);
}
format(value: string) {
log("formatting...");
}