Angular 2 multiple custom value accessor

Question

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

Answer 1

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>

Answer 2

Rafael, I had the same issue, my solution was set the input to readonly and allow the user to choose the date only using the calendar.

<fieldset class="form-group">
  <label>End Date</label>
  <div class="input-group">
    <span class="input-group-addon" (click)="dpEndDate.toggle()">
      <i class="fa fa-calendar"></i>
    </span>
    <input readonly required [(ngModel)]="model.endDate" 
      type="text" class="form-control" id="endDate"
      name="endDate" ngbDatepicker #dpEndDate="ngbDatepicker">
  </div>
</fieldset>

Answer 3

I was facing the same problem. I have used "ngx-datepicker with mask".I removed ngModel from the input and it's working absolutely fine.