Masking Custom Signal Form Controls

[kyleryanbanks]

🚀 feature request

Description

There were recent updates to allow masking of inputs + the FormField directive that seems to be working as intended, but I'm not seeing any examples or guidance on how to mask an input powered by signal forms inside of a custom form control.

There are other issues open where multiple ControlValueAccessors were causing issues in custom form controls, but that doesn't apply here as I'm both not using the CVA pattern and we're inside the custom component.

To the best of my knowledge, once ngxMask is on the input, the internal value signal and form model signal get out of sync with each other.

Describe the solution you'd like

I would like to be able to use the NgxMaskDirective on elements contained within the template of a custom signal form control.

<some-custom-signal-form-control [formField]="someForm.field">
<input [value]="value()" (input)="value.set($event.target.value)" mask="someMask"/>

Describe alternatives you've considered

You can hook into onChange and have the mask value update the component's model, which does show on the screen, but updates to the component's value model from the FormField directive don't show on the input.

<some-custom-signal-form-control [formField]="someForm.field">
<input [value]="value()" (change)="value.set($event.target.value)" mask="someMask"/>

// inputs typed in are properly masked.
// value() changes from the custom form control value model() are not displayed in the input.

---

I tried using HostDirective so that the directive would sit at the same layer as it would in the raw case, but inputs/outputs are not automatically set up and I couldn't find a path forward that would require manually rewiring all of the mask controls. This does, however, allow people to force the mask directive onto any Angular component, rather than the specific 'input[mask]' selectors.

[roman-pashkovsky-zum]

I also have issues while making the mask work on signal inputs. When I programmatically disable the input, the value just disappears. And I still have to use ngModel to make the mask work. I believe we need some definite guidance on how to use it with signal forms.