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

which is the angular version ? try the ngDefaultControl attribute to your input. — catastrophic error, Jun 06 '17 at 20:13
Version 2.4. Are you saying for not use ngModel ? Still not working. The problem is when I use **textMask** and **ngbDatepicker**. Seems that Angular cannot support two directives from different packages. — Rafael Andrade, Jun 06 '17 at 21:06
@RafaelAndrade - did you found the solution for this? I am facing same issue. — Samir, Nov 25 '17 at 06:05

score 5 · Accepted Answer · answered Apr 18 '19 at 20:10

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>

score 3 · Answer 2 · answered Dec 25 '18 at 11:15

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.

answered Dec 25 '18 at 11:15

Akshay

52
2

score -3 · Answer 3 · answered Aug 16 '17 at 15:40

-3

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>

answered Aug 16 '17 at 15:40

hamilton.lima

1,902
18
29

1

:) sometimes change the requirements is the solution – hamilton.lima Aug 30 '17 at 21:55
1

I decided to use a place holder with how user should type the date. If he type something like 11/03/1992 my form will not allow him to go to next page. Or he types using ' - ' or he uses the calendar. – Rafael Andrade Nov 27 '17 at 13:32

Angular 2 multiple custom value accessor

3 Answers3

Linked