Apply mask to an HTML table column with Angular?

Asked

Viewed 2,679 times

2

How to put CPF mask in a table ? For inputs I used the ui-Cpf-Mask directive, but need to put in a table cell.

code:

 <tr *ngFor="let user of users | async">
            <td>{{user.nome}}</td>
            <td>{{user.cpf}}</td>
 </tr>

Imagery inserir a descrição da imagem aqui

  • Has there been any response?

  • @Virgilionovic is receiving this message after implementing his solution: Uncaught Error: Template parse errors: The pipe 'CPF' could not be found ("="user.sex==1">Male</td> <td *ngIf="user.sex==2">Female</td> <td>{{[ERROR ->]user.Cpf | CPF}}</td> <td>{user.nationality}}</td> <td>{user.naturalness"): ng:///Appmodule/Userlistcomponent.html@25:18 at syntaxError (Compiler.js:2175)

  • 1

    @Virgilionovic the mistake was the name of the pipe...had put into minuscule.

3 answers

3


Create a PIPE via command CLI Angular:

ng g pipe CPF

after this command will be created a file with the name of cpf.pipe.ts that its value (value) with a regular expression can create the CPF mask of the as follows:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'CPF'
})
export class CPFPipe implements PipeTransform {
  transform(value: string, ...args: any[]): any {
    if (value.length === 11) {
      return value.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/g, '\$1.\$2.\$3\-\$4');
    }
    return 'error';
  }
}

To use this pipe must be registered on app.module.ts in the array declarations, example:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CPFPipe } from './cpf.pipe';

@NgModule({
  declarations: [AppComponent, CPFPipe],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

After this setting just use

{{ numero_cpf | CPF }}

References

1

  • I tried to use this lib and I thought it added a lot of dependency on the project. I don’t like this idea. It’s easier just to pick up and base on the Cpf pipe and that’s it.

1

If you don’t like adding too much dependency on the project, you can use Cpf pipe of ng-Brazil, install the js-brasil only (npm i js-brasil) and create the pipe just for your project (ng g pipe cpf) - this while the ng-brazil not allow importing only this pipe, at least:

import { Pipe, PipeTransform } from '@angular/core';
import { maskBr } from 'js-brasil';

@Pipe({
  name: 'cpf',
})
export class CpfPipe implements PipeTransform {
  transform(cpfValue: any): string {
    return maskBr.cpf(cpfValue);
  }
}

Note: remember to import the pipe in the module you need.

Note. 2: this generates a Warning:

WARNING in app\shared\pipes\cpf.pipe.ts depends on 'js-brasil'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Browser other questions tagged

You are not signed in. Login or sign up in order to post.