Need a Mask for ion-input ionic v4

Ionic Framework
1

Hello, I’m looking for a mask for ion input of the form. I didn’t get anything until now, can someone help me ??
I’ve tried br-mask but return the error:
core.js:6185 ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘id’ of undefined

I need a mask that works on ionic v4.

Minha configuração:

Ionic CLI : 6.3.0 (C:\Users\DilDam\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.0.5
@angular-devkit/build-angular : 0.900.7
@angular-devkit/schematics : 9.0.7
@angular/cli : 9.0.7
@ionic/angular-toolkit : 2.2.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 4 other plugins)

Utility:

cordova-res : not installed
native-run : 0.3.0

System:

Android SDK Tools : 26.1.1 (C:\Users\DilDam\AppData\Local\Android\Sdk)
NodeJS : v12.16.1 (C:\Program Files\nodejs\node.exe)
npm : 6.14.3
OS : Windows 10
2

can u share ur code for better understanding, thank you

1 Like
3

I’m trying to use br-mask with the settings above.
Normal bass via npm: npm install br-mask --save -E, then just insert the module on the module page I’m using, in my case on the login.module.ts page:

import {BrMaskerModule} from ‘br-mask’;

@NgModule ({
imports: [
BrMaskerModule
],
})

When entering this and updating the error serves:
core.js: 6185 ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘id’ of undefined
is displayed on the console.

If we are unable to come up with a solution is there another mask that works with Ionic v4 ??

4

Apologies for late reply,
i think its not related to the br-mask module and something is wrong with your code for that input
Can u share ur html code and corresponding .ts code for this ?

5

The code HTML:

<form [formGroup]="loginForm">
                <ion-item>
                  <ion-label position="floating">CPF</ion-label>
                  <ion-input formControlName="cpf" type="text" [brmasker]="{mask: '000.000'}"></ion-input>
                </ion-item>
</form>

The Code .ts


import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import { AuthenticationService } from 'src/app/services/authentication.service';
import { LoadingController, ToastController, NavController } from '@ionic/angular'
import { AlertService } from '../../../services/alert.service';
import { Storage } from '@ionic/storage';




@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})


export class LoginPage implements OnInit {

  loginForm: FormGroup;

  //erros no formulário
  error_messages = {
    'cpf': [
      { type: 'required', message: 'Informe o CPF.' },
      { type: 'minLength', message: 'Informe no mínimo 6 caracteres' },
      { type: 'maxLength', message: 'Informe no máximo 50 caracteres.' },
      { type: 'pattern', message: 'Informe um CPF válido.' }
    ],
    'password': [
      { type: 'required', message: 'Informe a senha.' },
      { type: 'minLength', message: 'Informe no mínimo 6 caracteres' },
      { type: 'maxLength', message: 'Informe no máximo 30 caracteres.' },
      { type: 'pattern', message: 'Informe uma senha válida.' }
    ]
  }

  constructor(
    public formBuilder: FormBuilder,
    private authService: AuthenticationService,
    private loadCtrl: LoadingController,
    private alertService: AlertService,
    private storage: Storage
  ) {



    this.loginForm = this.formBuilder.group({

      cpf: new FormControl('', Validators.compose([
        Validators.required,
        Validators.minLength(11),
        Validators.maxLength(14),
        Validators.pattern('^([0-9]){3}\.([0-9]){3}\.([0-9]){3}-([0-9]){2}$')
      ])),
      password: new FormControl('', Validators.compose([
        Validators.required,
        Validators.minLength(6),
        Validators.maxLength(38),
        Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9-.]+$')
      ]))
    });

    



  }
  

  ionViewWillEnter(){
    this.authService.ifLoggedIn();    
  }



  ngOnInit() {
  }

}
6

Your error message says “Cannot read property ‘id’ of undefined”, so the problem has to lie somewhere where the code is attempting to read a property named “id” on an undefined object, like:

let foo;
let bar = foo.id;

I’m not seeing “id” anywhere in the code you posted.

7

Well, in my code there was no indefinite ID. The problem occurs just after inserting the line below in the import, after that, the message appears as an error occurs.

@NgModule ({
imports: [
BrMaskerModule <-------
],
})
8

Did you manage to find a mask solution for ionic?