CODEWITHSUNDEEP
angulartypescript
Newbie007
Newbie007

Reputation: 169

How to add text-mask in ngx-mydatepicker in angular 2?

I am using ngx-mydatepicker for date field. I need to add text-mask in that code. When i tried to add i got an error as "More than one custom value accessor matches form control with unspecified name attribute".

How to add text-mask now? I used angular2-text-mask npm for text-mask. It works fine for other input field. But not in ngx-mydatepicker date field

Upvotes: 0

Views: 3708

Answers (1)

Ruben Marcus
Ruben Marcus

Reputation: 338

I was trying to figure out the same, but when I searched for the error, I see people saying, it was not able to overcome this error. So when you don't find a solution to your problem, always go vanilla.

Solution:

Add a Mask Helper in your project

export function MaskedDate(event: any) {
  var v = event.target.value;
  if (v.match(/^\d{2}$/) !== null) {
    event.target.value = v + '/';
  } else if (v.match(/^\d{2}\/\d{2}$/) !== null) {
    event.target.value = v + '/';
}
}

at your component:

import { MaskedDate } from './helpers/mask.helper';

Declare the property in your component:

  dateMask = MaskedDate;

In your component html:

 <input style="float:none"  (keyup)="dateMask($event)" formControlName="birth_date"  placeholder="Select a date"  ngx-mydatepicker [options]="myOptions" #dp="ngx-mydatepicker"/>

You can still use text-mask with other inputs, no problem.

Upvotes: 5

Related Questions