0


You need to log in to create posts and topics.

Format number

Hi team,

I used input tag bellow detail:

<inputmatInputplaceholder="Amount"type="number"formControlName="amout"class="number-right-align"/>
I want to format number: 4,567,789 or 4,567,789.1234
Please spend your time to help me.
Thanks,
Quang LE

Hello John,

for shoh in the data-table:

<mat-cell fxFlex="15%" *matCellDef="let row"> {{row.price | currency:companyCurrency:'symbol':'1.2-2'}} </mat-cell>

for number

<mat-cell fxFlex="15%" *matCellDef="let row"> {{row.completeAmount | number:'1.2-2'}} </mat-cell>

for percent

<mat-cell fxFlex="15%" *matCellDef="let row"> {{row.rateOfTax | percent:'1.2-2'}} </mat-cell>

For input I do not use. But you can use

ngx-mask
regards Ingo

Hi,

currency input I use:

<input matInput formControlName="currencyRate" [readonly]="!isEditMode" required type="number" />

 

Quote from Ingo on March 14, 2019, 5:38 pm

Hi,

currency input I use:

  1. <input matInput formControlName="currencyRate" [readonly]="!isEditMode" required type="number" />
<input matInput formControlName="currencyRate" [readonly]="!isEditMode" required type="number" />

 

Hi @Ingo,

I having used your format but it allow input 'e' character or special character.

Thanks,

Quote from Ingo on March 14, 2019, 5:36 pm

Hello John,

for shoh in the data-table:

  1. <mat-cell fxFlex="15%" *matCellDef="let row"> {{row.price | currency:companyCurrency:'symbol':'1.2-2'}} </mat-cell>
<mat-cell fxFlex="15%" *matCellDef="let row"> {{row.price | currency:companyCurrency:'symbol':'1.2-2'}} </mat-cell>

for number

  1. <mat-cell fxFlex="15%" *matCellDef="let row"> {{row.completeAmount | number:'1.2-2'}} </mat-cell>
<mat-cell fxFlex="15%" *matCellDef="let row"> {{row.completeAmount | number:'1.2-2'}} </mat-cell>

for percent

  1. <mat-cell fxFlex="15%" *matCellDef="let row"> {{row.rateOfTax | percent:'1.2-2'}} </mat-cell>
<mat-cell fxFlex="15%" *matCellDef="let row"> {{row.rateOfTax | percent:'1.2-2'}} </mat-cell>

For input I do not use. But you can use

ngx-mask
regards Ingo

Hi @Ingo,

I don't use datatable for input data, i used mat-form-field:

<mat-form-field [floatLabel]="floatLabels" fxFlex>
          <input matInput placeholder="Amout" type="number" formControlName="amount"
            class="number-right-align" />
        </mat-form-field>

Thanks,

HI,

I also do not use the table for input.

I use this:

<input matInput formControlName="currencyRate" [readonly]="!isEditMode" required type="number" />

But its has no format.

Show this link https://www.npmjs.com/package/ngx-mask

Regards Ingo

Hi,

I found this:

<input matInput type="text" placeholder="Test Price" [ngModel]="testPrice | currency:'USD':'symbol':'2.2'" [ngModelOptions]="{updateOn:'blur'}" 
      (ngModelChange)="testPrice=$event"/> You can use the pipe currency, number or percentage. See also:

https://stackoverflow.com/questions/39642882/using-pipes-within-ngmodel-on-input-elements-in-angular

https://stackoverflow.com/questions/47355669/how-to-get-an-input-to-display-and-edit-currency-with-angular-4-pipes

Hello,

As Ingo recommended pipes are good for these kind of formatting. Take a look at the inbuilt angular CurrencyPipe https://angular.io/api/common/CurrencyPipe

Also you can consider node package like ngx-mask https://www.npmjs.com/package/ngx-mask

If you want to implement your own custom formatting, this post will show you how to use directives to achieve it https://blog.ngconsultant.io/custom-input-formatting-with-simple-directives-for-angular-2-ec792082976

Regards,
Eben Monney

Dear @Ingo,

Thanks you for support. I have used ng-mask and it hard working.

 

Thanks,

John LE