Which @HostListener to use in a directive to listen to a form control reset/setValue?

1.4k Views Asked by At

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...");
    }
0

There are 0 best solutions below