COMO VALIDAR FORMULÁRIO

Como colocar máscara de virgula em input angular?

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>

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.

Como colocar texto dentro do input html?

Descrever o Campo ou Orientar o Usuário

Usa-se o placeholder quando quer colocar uma informação descrevendo o campo ou orientando o usuário de como preencher o formulário. Essa informações fica visível no início da visualização sendo substituída por nada quando o usuário clica no campo e depois pela informação que ele digitar.

Essa informação não será submetida no envio do formulário.

Inserir Informação Padrão do Campo

Nesse caso para usar uma informação padrão usa o value. A informação aqui é equivalente a que for digitada e será submetida no envio do formulário.

Recuperar Dados

Quando se quer recuperar a informação no campo se pega o valor vindo do banco de dados ou outro local como XML ou JSON e coloca em uma variável ou array. Essa variável é informada no value normalmente, mas pode ser usada no placeholder também, seguindo o que foi falado acima, uma para registro e outra para demonstração respectivamente.

Como usar o onfocus do javascript no angular?

Como executar função quando clicar na caixa de texto input?