Mask Number Field

Ionic Framework ionic-v3
1

Anyone knows how to put mask in number field like (###,##), where I don’t need to type the dot"."

Thanks for the attention.

2

You can make your own mask by using a directive

2 Likes
3

How I use this on the html? Can you give an example?

Thanks!

4 
<ion-input mask="(***)***-****"></ion-input>
3 Likes
5

I made this way and didn’t worked… And no error messages in the console on my beta7 project. =\

6

Make sure that you also included the directive in the page, e.g. something like this (but make sure to specify the correct path to the directive source file):

import { Mask } from 'path/to/the/mask/directive';
// ...
@Page({
  // ...
  directives: [ Mask ],
  // ...
})
// ...
7

I can see the error now:

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in build/pages/cadastro/cadastro.page.html:28:12
        ORIGINAL EXCEPTION: No provider for NgModel!
        ORIGINAL STACKTRACE:
        Error: DI Exception
            at NoProviderError.BaseException [as constructor] (http://localhost:8100/build/js/app.bundle.js:3038:23)
            at NoProviderError.AbstractProviderError [as constructor] (http://localhost:8100/build/js/app.bundle.js:24341:16)
            at new NoProviderError (http://localhost:8100/build/js/app.bundle.js:24377:16)
            at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/js/app.bundle.js:25360:19)
            at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/js/app.bundle.js:25388:25)
            at ReflectiveInjector_._getByKey (http://localhost:8100/build/js/app.bundle.js:25351:25)
            at ReflectiveInjector_.get (http://localhost:8100/build/js/app.bundle.js:25160:21)
            at ElementInjector.get (http://localhost:8100/build/js/app.bundle.js:26742:48)
            at ElementInjector.get (http://localhost:8100/build/js/app.bundle.js:26742:48)
            at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/js/app.bundle.js:25385:24)
        ERROR CONTEXT:
        [object Object]

My input:

<ion-input mask="(***)***-****" [ngFormControl]="form.controls.cpf" [(ngModel)]="cliente.pessoa.cpf"  type="text"  required ></ion-input>

and I’m importing the directive…

8

Probably unrelated, but can anybody explain the benefit of using both [(ngModel)] and [ngFormControl] on the same element?

9

I use ngFormControl for the validation messages…

<ion-item>
    <ion-label floating>CPF</ion-label>
    <ion-input mask="(***)***-****" [ngFormControl]="form.controls.cpf" [(ngModel)]="cliente.pessoa.cpf"  type="text"  required ></ion-input>
</ion-item>
<div [hidden]="form.controls.cpf.pristine || form.controls.cpf.valid" class="alert alert-danger">
    É necessário informar um cpf válido
</div>
10

That’s cool, but why not then just use form.controls.cpf.value to get the result? I don’t understand the benefit of storing the same thing in two separate places.

11

because ngModel is for cliente.pessoa.cpf, when I submit the form I pass cliente like this:

private cadastrar() {
        this.loading = true;
        console.log(JSON.stringify(this.cliente));
        this.service.salvar(this.cliente).subscribe(
            data => {
                this.loading = false;
                this.fazerLogin();
            },
            err => {
                this.loading = false
                if (err.status === 409){
                    this.exibirToastErro('CPF ou e-mail já estão cadastrados no Medipop!');
                }
            }
        );
    }

How I can do that only with form.controls?

12

I don’t know what your overall data model looks like, but I like to harmonize it with the way the controls are named in the form, so you could just say cliente = this.form.value or cliente.pessoa = this.form.value in the submission method.

I guess it’s just a personal preference, but I always get nervous when there is more than one repository for any data, because inevitably at some point they get out of sync and then I have bugs trying to figure out which to believe. I guess it’s a cousin of the old line about how a man with two watches never knows what time it is.

1 Like
13

Can I do something like this?

export class Cliente { nome: string; pessoa: Pessoa; }

and manage to somehow submit it like this:

submit() { this.cliente = this.form.value; ... call service layer... }

if yes, how do I setup my ControlGroup?

14

The only field that I know Pessoa has is cpf, so hopefully you can extrapolate from this snippet:

@Page()
export class MyPage {
  form: ControlGroup;
  
  constructor(fb:FormBuilder) {
    this.form = fb.group({
      'nome': ['', Validators.required],
      'pessoa': fb.group({
        'cpf': [''],
      })
    });
  }

  register(): void {
    console.log(JSON.stringify(this.form.value));
  }
}

<form [ngFormModel]="form" (submit)="register()">
  <ion-input [ngFormControl]="form.controls.nome"></ion-input>
  <ion-input [ngFormControl]="form.controls.pessoa.controls.cpf"></ion-input>
  <button type="submit">submit</button>
</form>
15

https://www.npmjs.com/package/@msafi/angular2-text-mask

This was derived from this example .

16

I got
$ npm i @msafi/angular2-text-mask --save npm WARN deprecated @msafi/angular2-text-mask@0.7.0: No longer maintained. Install 'angular2-text-mask' without '@msafi/' ionic-leopark-app@ /Users/hugocardoza/sensittive-leopark/ionic-leopark-app ├── @msafi/angular2-text-mask@0.7.0 └── UNMET PEER DEPENDENCY angular2@*

17

Did you solve it? I am having the same issue

18

I wonder if [attr.type]="‘password’" would work?

19

Hey victor, have you solved your issue? I’m trying to go over it, but it seems I’m not getting the value on the mask directive.

Thanks in advance

20

For now I’m not using mask…
My project is stoped, waiting for the production releases for angular2 and ionic2…