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

Support for Masks when using Angular Material #1150

Open
thomastardy opened this issue Oct 22, 2021 · 1 comment
Open

Support for Masks when using Angular Material #1150

thomastardy opened this issue Oct 22, 2021 · 1 comment

Comments

@thomastardy
Copy link

thomastardy commented Oct 22, 2021

I'm submitting a


[ ] Bug / Regression
[x] Feature Request / Proposal

I'm using


NG Dynamic Forms Version: `14.0.1`

[ ] Basic UI
[ ] Bootstrap UI  
[ ] Foundation UI
[ ] Ionic UI
[ ] Kendo UI
[x] Material  
[ ] NG Bootstrap
[ ] Prime NG

Description

We've started using NG Dynamic Forms version 6.0.7 in a form-heavy application of ours where we use Angular Material as well. This worked perfectly and help us save lots of from code. We have quite a lot of inputs where we make use of masks.
In the process of updating the application we wanted to update NG Dynamic Forms to the latest version but have seen that masks are not supported anymore when Angular Material is used.

Is there a way to bring the support for mask back when used with Angular Material?

@thomastardy thomastardy changed the title Mask not working with Angular Material Support for Masks when using Angular Material Oct 22, 2021
@clementsanzID
Copy link

clementsanzID commented Nov 22, 2021

Hi,

I have the same issue.
After some research i found a workaround here angular/angular#16755 (comment)
I didn't figure out how to add a tag in the model to use @ViewChild(tag) so i use document element :

constructor( ...
    @Inject(DOCUMENT) document ) {
}

public ngAfterViewInit() {
    const date =  document.getElementById( 'date' );
    const mask = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
    textMask.maskInput( {
      inputElement: date,
      mask: mask
    } );
}

Hope it's help

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

No branches or pull requests

2 participants