Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NgxMask doesn't work with matAutocomplete #823

Open
anmal opened this issue Nov 10, 2020 · 5 comments
Open

NgxMask doesn't work with matAutocomplete #823

anmal opened this issue Nov 10, 2020 · 5 comments

Comments

@anmal
Copy link

anmal commented Nov 10, 2020

I'm trying to use NgxMask along with matAutocomplete.
They don't work together. I get an error:

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

Please, make them compatible or add your own autocomplete feature to NgxMask.

Thank you in advance!

@stefanofalasca
Copy link

I confirm that doesn't work, same error:

<div [formGroup]="formGroup">
  <mat-form-field style="width: 100%; margin-top: 5px">
    <input matInput
           [matDatepicker]="picker"
           autocomplete="off"
           placeholder="gg/mm/aaaa"
           formControlName="dateControl"
           mask="d0/M0/0000"
           [leadZeroDateTime]="true"
           (ngModelChange)="onDateChanged($event)"
           style="width: 100%">
    <mat-datepicker-toggle matSuffix [for]="picker" tabindex="-1">
      <mat-icon matDatepickerToggleIcon>expand_more</mat-icon>
    </mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
</div>

@aintnomoreloyalty
Copy link

Hello everyone. I also face that issue with matAutocomplete, any thoughts on this?
@NepipenkoIgor @anmal

@anmal
Copy link
Author

anmal commented Apr 29, 2021

Hello everyone. I also face that issue with matAutocomplete, any thoughts on this?
@NepipenkoIgor @anmal

As I understood, the only way is to extend ngx-mask functionality with its own autocomplete implementation, but you can't use matAutocomplete along with ngx-mask because they both are custom form controls with their own ValueAccessor. But angular allows you to use only one ValueAccessor. You can either implement your own autocomplete for ngx-mask form controls, or your own mask for matAutocomplete form controls (that was our way).

@Res42
Copy link

Res42 commented May 7, 2021

Hello everyone. I also face that issue with matAutocomplete, any thoughts on this?
@NepipenkoIgor @anmal

As I understood, the only way is to extend ngx-mask functionality with its own autocomplete implementation, but you can't use matAutocomplete along with ngx-mask because they both are custom form controls with their own ValueAccessor. But angular allows you to use only one ValueAccessor. You can either implement your own autocomplete for ngx-mask form controls, or your own mask for matAutocomplete form controls (that was our way).

I had the same problem: I needed to mask a MatAutocomplete.

Similar to what anmal did we "hacked" a vanilla-text-mask to the MatAutocomplete input. Our only problem with vanilla-text-mask was that it has no type definitions.

@lidiagabriela
Copy link

Hello. I have this problem with matAutocomplete too. Do you have any news? Or any idea where the root cause is coming from? From ngx-mask or from Angular Material?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants