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

[dgouissem]

Hey,

I 'm using the Angular 5.0 and Angular Material 2.0.0-beta.8, when i applied the ngx-mask within my custom component i got the below error

 <md-input-container class="full-width">
  <input mdInput [mdDatepicker]="datepicker" placeholder="Date" mask="00/00/0000" dropSpecialCharacters="false" [placeholder]="label"
    [required]="required" [formControl]="formControl" />

  <md-datepicker #datepicker></md-datepicker>
  <span class="fa fa-calendar" mdPrefix>&nbsp;</span>
  <md-error *ngIf="error">{{ error }}</md-error>
</md-input-container>

ng:///FormComponentsModule/DateComponent.ngfactory.js:36 ERROR Error: More than one custom value accessor matches form control with unspecified name attribute
at _throwError (webpack-internal:///../../../forms/esm5/forms.js:2463)
at eval (webpack-internal:///../../../forms/esm5/forms.js:2544)
at Array.forEach ()
at selectValueAccessor (webpack-internal:///../../../forms/esm5/forms.js:2533)
at new FormControlDirective (webpack-internal:///../../../forms/esm5/forms.js:6463)
at createClass (webpack-internal:///../../../core/esm5/core.js:12363)
at createDirectiveInstance (webpack-internal:///../../../core/esm5/core.js:12206)
at createViewNodes (webpack-internal:///../../../core/esm5/core.js:13644)
at callViewAction (webpack-internal:///../../../core/esm5/core.js:14076)
at execComponentViewsAction (webpack-internal:///../../../core/esm5/core.js:13985)

It seems that the formControl attribut is causing the issue when removing it any clue to resolve the issue

Thanks and regards

[NepipenkoIgor]

@dgouissem Thanks, we will check

[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.

[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>

[deividfortuna]

There is a workaround solution not using ngx-mask library
Take a look in this issue: https://github.com/angular/angular/issues/16755

[aemonge]

Still the recommended option is not to use this library ?

[jongbonga]

still not fix here?

[muneebshafiq]

[UPDATE]
I don't know where previous link was redirecting but correct link is here
https://github.com/ng-bootstrap/ng-bootstrap/issues/2291#issuecomment-469926906

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?

[rafaelgoncalves2010]

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

[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.

[marciusbezerra]

I put a normal INPUT and had to reproduce the styles just like ION-INPUT. The updates of Angular and Ionic are causing a lot of problems for us that we have to keep doing "work arounds", it would be very good that they stop updating, because they only do shit.

[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: https://github.com/ng-bootstrap/ng-bootstrap/issues/2291#issuecomment-787098155.
use RacoonMask and NativeDateAdapter.