8

I want to mask material date control, for that I have tried two npm modules. first, I used ngx-mask and got this Error:

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

The Reason for the error is; ngx used ValueAccessor in their realization, but angular has a limitation -> we can use only one realization ValueAccessor. That's why ngx-mask doesn't work with material.refre

The Second solution is VanillaTextMask.js and I got some abnormal behavior:

If you try a date like "06/11/1983" you will see the model value is "06/11/1983_",and if you type another number it will get appended. refer

so, can anyone offer some other solution for implementing masking for angular material input control?

Newsha Nik
  • 806
  • 2
  • 12
  • 29
Neha Bhoi
  • 141
  • 1
  • 1
  • 9
  • you can use a directive like https://stackoverflow.com/questions/54460923/angular-2-restrict-input-field/54462816#54462816 – Eliseo Sep 27 '20 at 17:33

1 Answers1

2

Try with Text mask, they have to work with angular 2+. Example with stackblitz: https://stackblitz.com/edit/angular-gdqkir

Fetrarij
  • 7,176
  • 3
  • 27
  • 35
  • I have use Text mask as you suggested: getting extra character at input when added textmask directive with matDatepicker ; also if I add ngModel with the same then get `More than one custom value accessor matches form control with unspecified name attribute` error – Neha Bhoi Jun 10 '18 at 10:43
  • but why do you want to use mask and the picker in the same time? it doesnt make sense. Use the datepicker only, you dont need to use mask because the value will be always a date – Fetrarij Jun 10 '18 at 14:03
  • if is a mat-datepicker, you can use only material, see https://stackoverflow.com/questions/57218343/angular-material-date-picker-format-locale/57219390#57219390 – Eliseo Jul 28 '19 at 20:24