Problem with brmask in Ionic 4?

Question

Besides this mask I tried to use two others that resulted in the same error, which is the following:

ERROR Error: Uncaught (in promise): Error: More than one custom value accessor matches form control with unspecified name attribute
Error: More than one custom value accessor matches form control with unspecified name attribute

This is the item that contains the problem:

 <ion-item>
  <ion-label color="primary" position = "floating" >CPF</ion-label>
  <ion-input  [(ngModel)] = "usuario.cpf" [brmasker]="000.000.000-00"></ion-input>
</ion-item>

Module :

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    BrMaskerModule
  ],
  declarations: [CadastrarPage]
})

follows the complete Typescript as requested:

import { Component, OnInit } from '@angular/core';
import { ModalController, AlertController } from '@ionic/angular';
import { UsuarioService } from 'src/app/services/usuario.service';


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

export class CadastrarPage implements OnInit {

  resultado : any = {
    nome          : false,
    apelido       : false,
    sexo          : false,
    estado_civil  : false,
    email         : false,
    cpf           : false,
    celular       : false,
    dt_nascimento : false,
    password      : false
  }
  usuario : any = {}

  constructor(
    private modalCtrl : ModalController,
    private usuarioService : UsuarioService,
    private alertController : AlertController
  ) { }

  ngOnInit() {
  }

  fechar()
  {
    this.modalCtrl.dismiss()
  }

  async cadastrar()
  {
    const alert = await this.alertController.create({
      header:   'ERRO',
      message:  'Houve um erro, tente nvoamente mais tarde.',
      buttons:  ['OK']
    })

    this.usuarioService.incluir(this.usuario).subscribe(
      data => {
        if(data.status == 200)
        {
          this.resultado = data.body
        }
      },
      err => {
        alert.present()
      }
    )

  }

}

and HTML :

<ion-header>
  <ion-toolbar>
    <ion-title>cadastrar</ion-title>
    <ion-button (click)="fechar()" icon-only><ion-icon name="arrow-back"></ion-icon></ion-button>
  </ion-toolbar>
</ion-header>


<ion-content padding>



    <ion-item>
      <ion-label color="primary" position = "floating" >Nome</ion-label>
      <ion-input name="nome" [(ngModel)] = "usuario.nome" name="nome"></ion-input>
    </ion-item>
    <div *ngIf ="resultado.nome">
        <ion-label color="danger">{{resultado.nome}}</ion-label>
    </div>

    <ion-item>
      <ion-label color="primary" position = "floating" >Apelido</ion-label>
      <ion-input name="apelido" [(ngModel)] = "usuario.apelido"></ion-input>
    </ion-item>
    <div *ngIf ="resultado.apelido">
        <ion-label color="danger">{{resultado.apelido}}</ion-label>
    </div>

    <ion-item>
      <ion-label color="primary" position = "floating" >Sexo</ion-label>
      <ion-input name="sexo" [(ngModel)] = "usuario.sexo"></ion-input>
    </ion-item>
    <div *ngIf ="resultado.sexo">
        <ion-label color="danger">{{resultado.sexo}}</ion-label>
    </div>

    <ion-item>
      <ion-label color="primary" position = "floating" >Estado Civil</ion-label>
      <ion-input name="estado_civil" [(ngModel)] = "usuario.estado_civil"></ion-input>
    </ion-item>
    <div *ngIf ="resultado.estado_civil">
        <ion-label color="danger">{{resultado.estado_civil}}</ion-label>
    </div>

    <ion-item>
      <ion-label color="primary" position = "floating">E-mail</ion-label>
      <ion-input name="email" [(ngModel)] = "usuario.email"></ion-input>
    </ion-item>
    <div *ngIf ="resultado.email">
        <ion-label color="danger">{{resultado.email}}</ion-label>
    </div>

    <ion-item>
      <ion-label color="primary" position = "floating" >CPF</ion-label>
      <ion-input name="cpf" [(ngModel)] = "usuario.cpf" [brmasker]="000.000.000-00"></ion-input>
    </ion-item>
    <div *ngIf ="resultado.cpf">
        <ion-label color="danger">{{resultado.cpf}}</ion-label>
    </div>

    <ion-item>
      <ion-label color="primary" position = "floating" >Celular</ion-label>
      <ion-input name="celular" [(ngModel)] = "usuario.celular"></ion-input>
    </ion-item>
    <div *ngIf ="resultado.celular">
        <ion-label color="danger">{{resultado.celular}}</ion-label>
    </div>

    <ion-item>
      <ion-label color="primary" position="floating">Data de Nascimneto</ion-label>
      <ion-datetime name="dt_nascimento" [(ngModel)] = "usuario.dt_nascimento" displayFormat="DD/MM/YYYY" min="1994-03-14" max="2012-12-09" value=""></ion-datetime>
    </ion-item>
    <div *ngIf ="resultado.dt_nascimento">
        <ion-label color="danger">{{resultado.dt_nascimento}}</ion-label>
    </div>

    <ion-item>
      <ion-label color="primary" position="floating">Senha</ion-label>
      <ion-input name="password" [(ngModel)]="usuario.password" type="password"></ion-input>
    </ion-item>
    <div *ngIf="resultado.senha">
      <ion-label color="danger">{{resultado.password}}</ion-label>
    </div>

    <ion-button (click)="cadastrar()">Cadastrar</ion-button>

</ion-content>

Note: if I use [brmasker] in an input without ngModel on this page, it works perfectly

Answer 1

Follow the steps below carefully to solve your problem:

1. Remove the packages you have installed so far for formatting, so use the npm name-package command;

2. Done this install the following package: https://github.com/amarkes/br-mask, this is a version of br-Mask that has ionic4 compatibility, to install run the command below:

   npm install br-Mask --save -E

3. In the module file of the page, (in my case groups.module.ts) where you want to use the mask, import the Brmaskermodule, will look like the example below, note that in this example I am using Reactive Forms, which is the guidance of the Ionic team, (source: https://ionicframework.com/docs/v3/developer-resources/forms/):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { GruposPage } from './grupos.page';
import { BrMaskerModule } from 'br-mask';



const routes: Routes = [
  {
    path: '',
    component: GruposPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    ReactiveFormsModule, /* Para trabalhar com Reactive Forms Rapha */
    BrMaskerModule
    
  ],
  declarations: [GruposPage]
})
export class GruposPageModule {}

4. Now just apply the mask, but stay tuned to the name of the form, because when applying the mask, you will need to use a form.get... where the form is the name of your form, see how below a CPF mask, (groups.page.html):

<ion-header>
  <ion-toolbar>
    <ion-title>Grupo</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

  <form [formGroup]="formulario" (ngSubmit)="logForm()">
    <ion-item>
      <ion-label>CPF</ion-label>
      <ion-input type="text" name="cpf" formControlName="cpf" placeholder="CPF" [brmasker]="{form: formulario.get('cpf'), mask: '999.999.999-99'}"></ion-input>
    </ion-item>
    <button ion-button type="submit" [disabled]="!formulario.valid">Enviar</button>
  </form>


</ion-content>

5. And finally look at the file groups.page.

import { Component, OnInit } from '@angular/core';
import {Validators, FormBuilder, FormGroup } from '@angular/forms';


@Component({
  selector: 'app-grupos',
  templateUrl: './grupos.page.html',
})
export class GruposPage implements OnInit {

  private formulario : FormGroup;

  constructor(private formBuilder: FormBuilder) {

    this.formulario = this.formBuilder.group({
      cpf: ['', Validators.required],
    });

  }

  ngOnInit() {

  }

  logForm(){
    console.log(this.formulario.value)
  }

}

Answer 2

When using [(ngModel)] you need to define the attribute name.

In your case it would look like this:

<ion-input name="cpfUsuario"  [(ngModel)] = "usuario.cpf" [brmasker]="000.000.000-00"></ion-input>

Answer 3

I had the same problem, and my solution was to use another plugin called ngx-Mask.

But I couldn’t use the [(ngModel)]. To solve how to update the values in a variable, in the button I added [disabled]="validaCPF(cpf)" and adding #cpf in the ion-input with the applied mask, and then in the method validaCPF i saved the new value and returned the result of a simple validation.

It would look something like this:

<ion-item>
   <ion-label color="primary" position = "floating" >CPF</ion-label>
   <ion-input #cpf name="cpf" mask="000.000.000-00"></ion-input>
</ion-item>

...

<ion-button (click)="cadastrar()" [disabled]="validaCPF(cpf.value)">Cadastrar</ion-button>

And in your file .ts:

public validaCPF(cpf: string): boolean {
    this.usuario.cpf = cpf;

    return cpf.length === 0;
}