Ng-zorro-antd: Input Mask support for nz-inputs

[thinkdj]

What problem does this feature solve?

In enterprise level apps, there is sometimes a need for entering sensitive data fields. Such inputs need to be masked/unmasked. Eg. DOB 19/09/1992 becomes **/**/****

What does the proposed API look like?

<input nz-input [nzMask]="myPattern" />

[lppedd]

@thinkdj so this is more about obscuring characters right?
I ask because input masking is a pretty complex subject and it's not something I would ask to be re-implemented, see for example https://github.com/RobinHerbots/Inputmask

[thinkdj]

@lppedd ngZorro is an amazingly flexible library and I'd _love_ to see actual masks implemented in it, as that would make it apt for more enterprise applications use-cases without having to depend on an additional package.
I do agree with your suggestion too, and would be great if we begin with obscuring characters for a start!

[davidhenley]

+1

[wendellhu95]

For now you can use these with nz-input:

https://github.com/JsDaddy/ngx-mask#readme

https://github.com/uNmAnNeR/imaskjs/tree/master/packages/angular-imask

[hsuanxyz]

https://github.com/text-mask/text-mask/tree/master/angular2/#readme
https://stackblitz.com/edit/angular-42tfkp?file=src/app/app.component.ts

[thinkdj]

@wendzhue @hsuanxyz Thank you for the wonderful suggestions!

[mattarau]

I'd like to add that using 3rd party plugins would be fine if the DatePicker and TimePicker were directives to be used with the <input> tag (like nz-input), but since they are components that create an input internally, it's not possible to mask their value without a "hack".

[jonasschumacher]

@mattarau can you share how did you manage to get masks working with datepicker?

[hsuanxyz]

This issue has been closed due to inactivity.
Please file a new issue or discussion if you are encountering a similar or related problem.