Angular debounce with mask on input

Question

There is an HTML <input/> (ReactiveFormsModule) and I would like to have two (independent) features:

• debounced input
• input with a mask

I would like to apply the Single Responsibility pattern:

• so I have implemented appDebounceInput (using ControlValueAccessor/CVA)
• used a library for the mask - ngx-mask

app.component.html:

<input type="text"
       [formControl]="formControl"
       appDebounceInput                <!-- CVA1 -->
       mask="separator.0"              <!-- CVA2 -->
/>

But this causes a problem, because there are two CVAs now (first from appDebounceInput, second from mask).

Error: More than one custom value accessor matches form control with unspecified name attribute

(Yes, I know, Angular can't have two CVAs on single input.)

I would like to keep both features separated and use them independently or combined.

(And I do not want to move the debounce time logic in consuming component: this.formGroup.get('money').valueChanges.pipe(debounceTime(500)) - I want to update the formGroup after debounce time.)

One option would be to create an extra component and hide the input with the mask (one CVA) in this component and implement debounce on top - but this approach would hide the native HTML (causing some other problems, such as native input features will be hidden).

I am looking for a better approach how to solve this issue:

• Single Responsibility for features
• have both features independent
• and have the possibility to use them combined

Any ideas? :)

Stackblitz.