Como colocar máscara de virgula em input angular?

máscara virgula input angular

Basta usar ngx-currency-mask e chamar no input, veja mais abaixo.

Essa máscara de virgula normalmente é usada para informar valor de dinheiro, por isso é tratada como moeda nesse artigo, mas poderia ser usada em outros valores numéricos como de percentual ou qualquer outro que precise da informação quebrada. Fazendo pequenos ajustes no código.

Para usar você pode baixar do git aqui. Ou seguir os passos do npm clicando aqui.

Veja abaixo a tradução livre da explicação do autor no GitHub - Leo Tanoue, aplicado a moeda brasileira.

    A máscara de moeda deve ser fácil de implementar em todos os aplicativos. O controle de diretivas foi usado para fazer isso e tudo está sob um módulo que pode ser facilmente importado.
    O valor formatado deve ser composto por: Símbolo monetário do real brasileiro 'R$' + valor + precisão de 2 casas decimais. O código pode ser melhorado para permitir parâmetros diferentes para controlar a moeda de um país e também uma precisão de ponto decimal.
    Quando o usuário foca na entrada, ele deve remover toda a formatação e manter apenas a quantidade decimal com a precisão.

a. O usuário digita "100" e depois desfoca, deve exibir R$ 100,00
b. O usuário digita "100,10" e depois desfoca, deve exibir R$ 100,10
c. O usuário digita ".25" e depois desfoca, deve exibir R$0,25

    O usuário não deve poder digitar nada que não seja números ou separador decimal ".".
    Existe um parâmetro opcional para permitir a adição de números negativos. No modo Editar o indicativo de número negativo é o sinal de menos "-", mas quando formatado colocamos o valor entre parênteses. Portanto, na entrada -300,12 será exibido como (R$ 300,12).


Adaptações no código para aplicar no real brasileiro

O código irá vir no formato de dólar, poderia ser passado os parâmetros na chamada do currency mask, mas para pode ser ajustado isso no código também. Assim poderá declarar menos no html.

No arquivo currency-mask.service.ts o construtor vem como:
 

  constructor() {
    this.
prefix = '$';
    this.
decimalSeparator = '.';
    this.
thousandsSeparator = ',';
  }


Para usar no formato brasileiro seria:

  constructor
() {
    this.
prefix = 'R$';
    this.
decimalSeparator = '.';
    this.
thousandsSeparator = ',';
  }

Com o R de real na frente do cifrão e o ponto de milhar e a virgula de separador do decimal.


Exemplo de uso:

No arquivo HTML seria chamado algo como:

<div class="form-group">
    <input type="text" formControlName="dinheiro" class="form-control" id="din" appCurrencyMask >
</div>


Veja mais em:

Como usar pipe no angular?

Como se chama a barra vertical na informática?

Quais as siglas de moeda de cada país?

Como tratar números negativos com decimais no angular?

Como configurar o currency pipe no angular?

Quando usado o currency diretamente no angular ele traz o número no formato americano ainda, com ponto separar os centavos e virgula no milhar. Por exemplo para "1234,56" | currency, ficaria $1,234.56. Isso ainda está fora do padrão nacional de real que seria R$ 12.324,56.

Para chegar nesse objetivo deve ser declarada a sigla de origem da moeda que no nosso caso é BRL para ter R$ no lugar de cifrão apenas. Ficando assim "1234,56" | currency 'BRL'. Isso retornária R$1234,56.

Para ficar melhor teria que importar o formato de moeda brasileira no ts da sua aplicação, algo assim:


import { DEFAULT_CURRENCY_CODE, LOCALE_ID, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import ptBr from '@angular/common/locales/pt';
import { registerLocaleData } from '@angular/common';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  providers:    [ 
     { provide: LOCALE_ID, useValue: 'pt' },
  ],
})
export class AppModule { }


Logo abaixo mostro como seria para deixar padrão o 'BRL' e não precisar declarar sempre que for usar.


@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  providers:    [
    { provide: LOCALE_ID, useValue: 'pt' },
     
    { provide: DEFAULT_CURRENCY_CODE, useValue: 'BRL' },
     
    ],
})
export class AppModule { }

Explicação extra

O termo currency vem de moeda corrente.

No angular esses padrões usados no front-end são chamados de pipes, pois na sua implementação são chamadas assim, por exemplo:

variável | padrão

Sendo essa barra vertical entre a "variável" e o "padrão" o pipe.

 

Quer acompanhar as novidade do site?

Leia mais em: ithub.com/LeoTanoue/ngx-curre...

Como colocar máscara de virgula em input angular?

Última atualização: 2023-02-15