[SOLVED] Angular 2 multiple custom value accessor

Angular 2 multiple custom value accessor

I am creating an application using angular2.

I need to get a Date from user input using a calendar popover, but I need to put a mask on user input to stay in this format dd-mm-YYYY when he is typing.

I am using two different modules that I got from web ng-bootstrap and angular2-text-mark

<input [textMask]="{mask: mask}" type="text" class="form-control" placeholder="yyyy-mm-dd"
         name="dp" [(ngModel)]="date" ngbDatepicker #d="ngbDatepicker">

When I use textMask and ngbDatepicker on same tag I get this error

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

Is there a way to do this kind of things ?

Thanks

Solution

It doesn't have a solution until today. Here is what i've done to still be able to use a MASKED INPUT and a Ngb DATEPICKER, I've created two inputs, one with the masked input, the other with the datepicker. Whenever a value changes, they both update the main object (wich used to be the ngModel bind.

Here is the code. I hope it helps someone.

<div class="input-group">
  <input
    type="text"
    class="form-control form-control-sm"
    [(ngModel)]="begin_date"
    (change)="onDateInput($event.target.value)"
    placeholder="dd/mm/aaaa"
    [textMask]="{mask: maskedInput.date}"
  >
  <input
    type="hidden"
    (dateSelect)="onDateSelect($event)"
    [(ngModel)]="object.begin"
    ngbDatepicker
    #dI="ngbDatepicker"
  >
  <div class="input-group-addon">
    <button
      class="btn btn-outline-secondary btn-sm"
      (click)="dI.toggle()"
      type="button"
    >
      <i
        class="fa fa-calendar"
        aria-hidden="true"
      ></i>
    </button>
  </div>
</div>