ryanehrler / ngx-mask-ionic Goto Github PK

Hello, I try to use mask="separator" mode with thousandSeparator="." but it doesn't work this library support it?

Thanks

Hi, I have a situation here where I have a mask like this: (00)0000-00009
but actually, the optional number would be here: (00)90000-0000

examples:
(14)91111-2222
or, it could be (14)1111-2222

So here in Brazil sometimes the user have this optional number on their mobile phone.

Here's what I've tried without success:
html

typescript

Even if I set:

[dropSpecialCharacters]="true" 

Input value and model value are the same:

Input value: 789-874.98
Model value: 789-874.98

Ionic 4

If I use the patterns in forRoot it works only in dev mode; when I use the --prod flag no pattern is defined and no char is allowed in forms.

Similar to: JsDaddy/ngx-mask#290

export function NgxMaskConfig(): optionsConfig {
    return {
        dropSpecialCharacters: false,
        patterns: {
            ...initialConfig.patterns,
            C: { pattern: new RegExp('[a-zA-Z 0-9\/\?\:\(\)\'\.\,\+\-]') },
            P: { pattern: new RegExp('[.,]') }
        }
    };
}

and
NgxMaskIonicModule.forRoot(NgxMaskConfig())

It doesn't work.

Thanks,
Luca

Immediately after deleting a character, the cursor is positioned at the end of the input, any ideas to avoid this? (tested with ionic4)

I have the mask plugin installed in project. Imported into both my base App.module and the "Registration" module (page).

If I'm on that route (after a refresh), the plugin works as designed masking the value as you type. But if I tap from routerLink to this route, the mask does nothing UNTIL i reach the end of the input (but I must hit one more character for it to work).

<ion-input type="tel" mask="00-00-0000" formControlName="DateOfBirth" ></ion-input>

EX. I type 01011900, expecting 01-01-1900. But it does not add the hyphens until i type 010119000<-the last EXTRA character will cause the mask to show.

Again, this only happens if I navigate to this route via routerLink. If I actually just go to this route (in browser) it works as designed.

I'm trying to achieve something like this Firstname lastname but both special characters and custom patterns are not accepting space.

remove console at line 92

Currently this package doesn't work with Ionic v5.x with Angular v10+. Attempting to install it shows Angular dependency errors, and module imports don't resolve properly.

I'm using a formBuilder in a ion-input where I also use a custom mask with custom pattern in order to create and edit a contact in a address book:

<form [formGroup]="contactForm">
    <ion-input
        formControlName="name"
        type="text"
        mask="C{40}"
        [patterns]="maskPatterns"
        maxlength="40"
        required>
    </ion-input>
</form>

public maskPatterns = {
    ...initialConfig.patterns,
    C: { pattern: new RegExp('[a-zA-Z 0-9\/\?\:\(\)\'\.\,\+\-]') },
    P: { pattern: new RegExp('[.,]') }
}

this.contactForm = this.formBuilder.group({
    name: [
        this.contact.name,
        Validators.compose([
            Validators.required,
                Validators.maxLength(40)
        ])
    ]
});

If the initial value of this.contact.name is not empty, the input was cleared.

I debugged a little bit your code and seems that the customPattern object inside the MaskApplierService is undefined when the first check runs the _checkSymbolMask method during the loading phase. In the following input changes the customPattern are filled with che new C and P pattern.

There is a way to force the module to set the custom pattern before the first check?

Thanks,
--Luca

Here is the full error

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'value' of undefined
TypeError: Cannot read property 'value' of undefined
at MaskDirective.set maskExpression [as maskExpression] (vendor-es2015.js:116601)
at setInputsFromAttrs (vendor-es2015.js:47573)
at instantiateAllDirectives (vendor-es2015.js:47275)
at createDirectivesInstances (vendor-es2015.js:46484)
at ɵɵelementStart (vendor-es2015.js:55133)
at ɵɵelement (vendor-es2015.js:55189)
at RegisterComponent_Template (template.html:55)
at executeTemplate (vendor-es2015.js:46444)
at renderView (vendor-es2015.js:46214)
at renderComponent (vendor-es2015.js:47793)
at resolvePromise (polyfills-es2015.js:3904)
at resolvePromise (polyfills-es2015.js:3856)
at polyfills-es2015.js:3966
at ZoneDelegate.invokeTask (polyfills-es2015.js:3505)
at Object.onInvokeTask (vendor-es2015.js:72989)
at ZoneDelegate.invokeTask (polyfills-es2015.js:3504)
at Zone.runTask (polyfills-es2015.js:3273)
at drainMicroTaskQueue (polyfills-es2015.js:3675)
at ZoneTask.invokeTask [as invoke] (polyfills-es2015.js:3590)
at invokeTask (polyfills-es2015.js:4727)