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

[dgouissem]

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

[Markus-Ende]

if it was to not work, why did you guys build it????????????!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!wtf

Please be respectful, this is open source work you don't have to use.

[NepipenkoIgor]

@dgouissem We used ValueAccessor in our current realization, but angular have limitation -> we can use only one realization ValueAccessor. That why ngx-mask don't work with material.

[rafaelgoncalves2010]

if it was to not work, why did you guys build it????????????!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!wtf

[jongbonga]

still not fix here?

[aemonge]

Still the recommended option is not to use this library ?

[muneebshafiq]

[UPDATE]
I don't know where previous link was redirecting but correct link is here
ng-bootstrap/ng-bootstrap#2291 (comment)

Basically use Racoon mask instead of ngx-mask

[Markus-Ende]

@dgouissem We used ValueAccessor in our current realization, but angular have limitation -> we can use only one realization ValueAccessor. That why ngx-mask don't work with material.

Could you please add this as a big disclaimer in the documentation?

[ashkan-dev-86]

Has anyone found a simpler solution?

There is no simple solution

[deividfortuna]

There is a workaround solution not using ngx-mask library
Take a look in this issue: angular/angular#16755

[NepipenkoIgor]

@dgouissem Thanks, we will check

[benj0c]

I have the same problem when try to use mask in combination with bsDatepicker.

<div class="form-group">
    <label class="control-label col-lg-2 text-right">Birthday</label>
    <div class="col-lg-4">
        <input type="text" class="form-control" formControlName="birthday" placeholder="MM/DD/YYYY"  mask="00/00/0000" autocomplete="off" bsDatepicker>
    </div>
</div>

[ravenda900]

I manage to create a workaround that works perfectly based on my expectation. I created a hidden input that handles the datepicker, the mask itself is attached to the actual input that is visible and added a event listener dateSelect to set the value from the date picker to the actual input with mask.

EDIT: I also added the positionTarget input to make the datepicker look that its been initialized in the actual input

<div class="input-group">
  <input type="text" class="form-control" #startDateInput id="startDate" formControlName="startDate" [leadZeroDateTime]="true" mask="d0/M0/0000" />
  <input type="hidden" (dateSelect)="onDateSelect($event, 'startDate')" ngbDatepicker #start="ngbDatepicker" [positionTarget]="startDateInput">
  <button class="btn" (click)="start.toggle()" type="button">
  <i class="mdi mdi-calendar"></i>
  </button>
</div>

onDateSelect(date: NgbDate, key: string): void {
    const formControl: any = {};
    formControl[key] = this.dateAdapter.toModel(date);
    this.form.patchValue(formControl);
}

[toniellenk]

there's another way here too: ng-bootstrap/ng-bootstrap#2291 (comment).
use RacoonMask and NativeDateAdapter.

[marcosvmauri]

I manage to create a workaround that works perfectly based on my expectation. I created a hidden input that handles the datepicker, the mask itself is attached to the actual input that is visible and added a event listener dateSelect to set the value from the date picker to the actual input with mask.

EDIT: I also added the positionTarget input to make the datepicker look that its been initialized in the actual input

<div class="input-group">
  <input type="text" class="form-control" #startDateInput id="startDate" formControlName="startDate" [leadZeroDateTime]="true" mask="d0/M0/0000" />
  <input type="hidden" (dateSelect)="onDateSelect($event, 'startDate')" ngbDatepicker #start="ngbDatepicker" [positionTarget]="startDateInput">
  <button class="btn" (click)="start.toggle()" type="button">
  <i class="mdi mdi-calendar"></i>
  </button>
</div>

onDateSelect(date: NgbDate, key: string): void {
    const formControl: any = {};
    formControl[key] = this.dateAdapter.toModel(date);
    this.form.patchValue(formControl);
}

Please, can you help me.
I'm getting error Cannot find name 'DateAdapter'
When I implement this code

[gitalvininfo]

Hi @NepipenkoIgor

May I ask if what is the status of this issue? I wish to implement a proper solution, not a workaround although it is working fine.
I am using ngbDatepicker of ng-bootstrap (Angular 11) and having this error in console

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

Thank you.

[Leomhl]

Same issue here :/

[mhagnumdw]

Has anyone found a simpler solution?