0

Eu tenho este dois campos, telefone e cep, onde gostaria de colocar máscara, mas como comecei a utilizar angular a pouco tempo, ainda não sei, e não achei nada explicativo na internet, que me ajudasse.

  <mat-form-field class="input-full-widthmetade">
        <input #telefone="ngModel" [(ngModel)]="fornecedor.telefone" matInput placeholder="Telefone"
            id="telefone" name="telefone">
    </mat-form-field>
<mat-form-field class="input-full-widthmedade">
    <input #cep="ngModel" [(ngModel)]="fornecedor.cep" matInput placeholder="CEP"
        id="cep" name="cep">
</mat-form-field>

Como faço para colocar máscara nestes inputs ? Obrigado.

1
  • Utiliza algum component a parte pra Angular, tem um monte para fazer máscara.
    – LeAndrade
    19/02/2020 às 21:14

1 Resposta 1

6

O NgxMask é uma biblioteca interessante para máscaras.

Instalação:

npm install --save ngx-mask

Na importação do teu módulo:

NgxMaskModule.forRoot()

No teu componente ficaria assim:

<mat-form-field class="input-full-widthmetade">
        <input #telefone="ngModel" [(ngModel)]="fornecedor.telefone" matInput placeholder="Telefone" id="telefone" name="telefone" mask="(00) 00000-0000">
</mat-form-field>
<mat-form-field class="input-full-widthmedade">
        <input #cep="ngModel" [(ngModel)]="fornecedor.cep" matInput placeholder="CEP" id="cep" name="cep" mask="00000-000">
</mat-form-field>

A quantidade de zeros são a quantidade de dígitos numéricos que é possível inserir no campo.

Aconselho-te também a utilizar o formControl para formulários reativos.

1
  • Muito obrigado pela ajuda Matheus.
    – Mariana
    28/02/2020 às 11:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .