Need a Mask for ion-input ionic v4

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

can u share ur code for better understanding, thank you

1 Like

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

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 ?

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() {
  }

}

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.

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 <-------
],
})