Mask Number Field


#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


#3

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

Thanks!


#4
<ion-input mask="(***)***-****"></ion-input>

#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.


#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…