taiga-family/maskito

๐Ÿš€ - Support Single Character Placeholder Definition

Closed this issue ยท 3 comments

Which package(s) are relevant/related to the feature request?

@maskito/core, @maskito/kit

Description

Hello Maskito Team,

I'd like to propose an enhancement to the Maskito library to allow specifying a single character as a placeholder, instead of requiring a fully defined placeholder string.

Proposed Feature: Introduce a placeholderChar option that lets us define a single character to be used throughout the entire mask.

Example:

Maskito({ mask: '999-999', placeholderChar: '*' }); // Allows using '*' instead of the default placeholder

In this example, * would be used automatically in place of all mask characters, generating a placeholder like -. This would improve usability and make placeholder configuration more concise.

Hello, @rizirf-connect !

Thanks for your proposal.
Unfortunately, we don't have plans to implement it for some reasons.

Firstly, it is impossible to implement it for RegExp mask expression.
It is possible only for Pattern mask expression. I am not sure that partially implemented feature is a good idea.
Moreover, the already existing approach to define Placeholder works fine for both types of mask expressions.

Secondly, it is too simple to implement the such behavior for Pattern mask expression without augmenting logic inside Maskito:

const PLACEHOLDER_CHAR = '*';
const mask = [/\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/];
const placeholder = mask.map(x => typeof x === 'string' ? x : PLACEHOLDER_CHAR).join('');

Our team does not prefer to add additional flags to the codebase without real necessity.
Adding additional property for Maskito only for one-line logic โ€“ too much for the light-weighted library.

Hello, @nsbarsukov !

Thank you for your prompt and thorough response to my proposal. I understand the limitations and appreciate the rationale you've provided regarding the placeholder implementation.

However, would it be possible for you to provide an example of how to implement a ControlValueAccessor directive for Maskito?

Your insights would be greatly appreciated.

Regards & Thanks!

@rizirf-connect Hello!

Maskito is already compatible with built-in DefaultValueAccessor.
Just put [ngModel] / formControl on native <input /> โ€“ everything should work.

If you want to augment DefaultValueAccessor (or any other already existing CVA) with "unmask"-logic, see this example:
https://maskito.dev/frameworks/angular#unmask

If you want to implement custom CVA. There is no limitations here. Just follow to any existing guide how to implement ControlValueAccessor.
maskitoTransform is useful utility to use inside writeValue.