Input Mask blocking value/validity update of formControl with Option updateOn: 'blur'

[Blafasel3]

I'm submitting a...

• [ ] Regression (a behavior that used to work and stopped working in a new release)

• [ ] Bug report

• [ ] Performance issue

• [x] Feature request

• [ ] Documentation issue or request

• [ ] Support request

• [ ] Other... Please describe:

Current behavior

Inputmask does not update value if formControl is configured with { updateOn: 'blur' } (AbstractControlOptions}

Expected behavior

Inputmask should update value with updateOn blur behavior.

Minimal reproduction of the problem with instructions

The gist: The InputMaskDirective does not

1. implement HostListener for the blur event

2. register any callback in the registerOnTouched Hook

So it just does nothing on blur event, because the callback defined in the registerOnTouched hook is never called. Heavily inspired by the logic you implemented for the input change event, we tried the following in our team and it seems to work:

  @HostListener('blur', ['$event.target.value'])

  onBlur = (_: any): void => {

  };

  registerOnTouched(fn: any): void {

    const parser = this.inputMask.parser;

    this.onBlur = (value): void => {

      fn(parser ? parser(value) : value);

    };

  }

If you want to, I can submit a PR including some Tests for it (which I did not write yet).

What is the motivation / use case for changing the behavior?

The InputMask is not usable with onBlur behavior.

Environment

Angular version: 11.2.14

I did not, but I'm pretty sure it would occur the same.

Browser:

• [x] Chrome (desktop) version 90.0.4430.85

• [ ] Chrome (Android) version XX

• [ ] Chrome (iOS) version XX

• [ ] Firefox version XX

• [ ] Safari (desktop) version XX

• [ ] Safari (iOS) version XX

• [ ] IE version XX

• [ ] Edge version XX

[shhdharmen]

We can allow users to pass eventname for @HostListener. @NetanelBasal thoughts?

[Blafasel3]

Sounds like a reasonable idea to make it configurable, but I feel it is rather redundant because you basically have the required information directly on the control: this.ngControl.control?.updateOn is either change (default), blur or submit. Afaik the value is readonly after initialization, so a dynamic listener could be build in the directives ngOnInit?

[shhdharmen]

Sounds good to me. @Blafasel3 Would you like to create PR?

[Blafasel3]

I got a working solution which I would like to discuss, so yes. For some reason I do not understand the solution I posted originally worked for a while and then just stopped, so I had to change it. I'm not able to push my feature branch of yet, could you enable me to do so? :)

[shhdharmen]

You need to fork this project and create a PR.

[Blafasel3]

See the attached PR. Any help with the issue described there is appreciated.