Example of use - angle mask

Question

I have these two fields, phone and zip code, where I would like to put mask, but as I started using angular a short time, I do not know, and I found nothing explanatory on the internet, that would help me.

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

How do I put mask on these inputs ? Thank you.

Answer 1

The Ngxmask is an interesting library for masks.

Installation:

npm install --save ngx-Mask

When importing your module:

NgxMaskModule.forRoot()

Your component would look like this:

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

The number of zeros is the number of numerical digits that can be entered into the field.

I also advise you to use formControl for reactive forms.