adding a thousand separator to a input field in angular4

Related searches

I'm using angular 4 for my front end.I want to insert a thousand seperator to a input field. I tried this code but its not working

   <input type="number" class="form-control" id="amount" placeholder="Amount" name="Amount" [ngModel]="Amount | number:'3.2-2'" (keypress)="onlyNumberKey($event)">

You can't add pipes like that. What you have to do is, format your number properly in the ts and bind it.

numeraljs is a really good library for this kind of scenarios.

Let me create a stackblitz using that.

Update

I created simple stackblitz. Please have a look. Any way I couldn't import numeral package into stackblitz due to require issue in stackblitz. But this is way more easy if you use numeral.

In this sample I used .toLocaleString(); functionality where JS automatically detects the browser region and convert your number appropriately. Eg if your browser locale en-US, number will format like 15,000. If it's nb-NO number may looks different way.

Add Comma Separated Thousands to Number Inputs in Angular2 , As Mark commented above you want to use a pipe. You can create a Pipe using the following syntax, then simply add the pipe to your� Add the thousand separator with the toLocaleString () function, then pass the sanitised value back to the input element. Note : The separator can either be, or. depending on the country code passed in the toLocaleString () function. German, de-DE, and Indonesia, id-ID, for example, use. instead of,.

You can add ngx-currency module and use it like this:

<input id="valueInput" class="input amount" placeholder="Amount" [(ngModel)]="amount" value="0" currencyMask min="0" (ngModelChange)="amountChanged($event)" >

Angular Material matInput control with thousands separator, Customizing an Angular Material directive by adding commas to digit on Angular FormControl operations (like set value to form field) we also� Although JavaScript does not understand a culture’s number separator, it can certainly format numbers based on a certain culture. It does so by using the Number.prototype.toLocaleString() method. This method allows you to convert a number to a string that is formatted with local numeric formatting settings.

I had a similar problem. To solve it I have used this article. I have created a slightly modified version to fit my needs.

import { Directive, ElementRef, forwardRef, HostListener, Input, OnDestroy } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { MAT_INPUT_VALUE_ACCESSOR } from '@angular/material';
import { Subscription } from 'rxjs';
import { formatNumber } from '@angular/common';

@Directive({
  selector: 'input[localizedNumericInput]',
  providers: [
    { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: LocalizedNumericInputDirective },
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => LocalizedNumericInputDirective),
      multi: true
    }
  ]
})
export class LocalizedNumericInputDirective implements ControlValueAccessor, OnDestroy {
  locale = 'en';
  decimalMarker: string;

  constructor(private element: ElementRef<HTMLInputElement>) {
  }

  private _value: string | null;

  get value(): string | null {
    return this._value;
  }

  @Input('value')
  set value(value: string | null) {
    this._value = value;
    this.formatValue(value);
  }

  @HostListener('input', ['$event.target.value'])
  input(value) {
    //Find all numerics, decimal marker(, or .) and -
    //It will delete thousandSeparator cos it's always opposite to decimal marker
    const regExp = new RegExp(`[^\\d${this.decimalMarker}-]`, 'g');
    //Separate value on before and after decimal marker
    const [integer, decimal] = value.replace(regExp, '').split(this.decimalMarker);

    //Send non localized value, with dot as decimalMarker to API
    this._value = decimal ? integer.concat('.', decimal) : integer;

    // If decimal separator is last character don't update
    // because it will delete . || ,
    if (this.isLastCharacterDecimalSeparator(value)) {
      this._value = value;
    }

    // here to notify Angular Validators
    this._onChange(this._value);
  }

  @HostListener('blur')
  _onBlur() {
    /**
     * Adding thousand separators
     */
    this.formatValue(this._value);
  }

  @HostListener('focus')
  onFocus() {
    this.unFormatValue();
  }

  _onChange(value: any): void {}

  /**
   * @param value
   * apply formatting on value assignment
   */
  writeValue(value: any) {
    this._value = value;
    this.formatValue(this._value);
  }

  registerOnChange(fn: (value: any) => void) {
    this._onChange = fn;
  }

  registerOnTouched() {}

  isLastCharacterDecimalSeparator(value: any) {
    return isNaN(value[value.length - 1]);
  }


  private formatValue(value: string | null) {
    if (value === null) {
      this.element.nativeElement.value = '';
      return;
    }

    if (this.isLastCharacterDecimalSeparator(value)) {
      this.element.nativeElement.value = value;
      return;
    }

    // Conclude the decimal and thousand separators from locale
    const [thousandSeparator, decimalMarker] = formatNumber(1000.99, this.locale).replace(/\d/g, '');
    this.decimalMarker = decimalMarker;

    //Here value should always come with . as decimal marker thus any other behavior is bug
    const [integer, decimal] = value.split('.');

    //Group every three elements, and add thousandSeparator after them
    this.element.nativeElement.value = integer.replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator);

    //Add decimals and decimalMarker if any
    if (decimal) {
      this.element.nativeElement.value = this.element.nativeElement.value.concat(decimalMarker, decimal);
    }
  }

  private unFormatValue() {
    const value = this.element.nativeElement.value;
    if (this.isLastCharacterDecimalSeparator(value)) {
      return;
    }
    const regExp = new RegExp(`[^\\d${this.decimalMarker}-]`, 'g');
    const [integer, decimal] = value.replace(regExp, '').split(this.decimalMarker);

    this._value = integer.concat('.', decimal);
    if (value) {
      this.element.nativeElement.value = this._value;
    } else {
      this.element.nativeElement.value = '';
    }
  }
}

To use this directive your html should look like this:

<mat-form-field>
<mat-label>Value</mat-label>
<input
        type="text"
        localizedNumericInput
        matInput
        autocomplete="off"
        formControlName="value"
      />
</mat-form-field>

adding a thousand separator to a input field in angular4, I'm using angular 4 for my front end.I want to insert a thousand seperator to a input field. I tried this code but its not working <input type="number"� Options Without any options passed to it, fcsa-number will validate that the input is a valid number and will also add commas for the thousand separators. With Angular 2, we get this same great feature, but they are now called pipes. Purplemath "Work" problems usually involve situations such as two people working together to paint a house.

Add Comma Separated Thousands to Number Inputs in Angular2, angularjs add commas to numbers automatically add commas to a number in a text box html input number format comma comma separated number in angular 6 The input type=”date” support in Google Chrome, which even features a handy inline calendar to select the desired day: neat! Suprisingly enough, one of the most simple cases – the number type – still has some nasty issues if you need to use decimal values. According to W3C specifications, you need to also add the step attribute to

HTML Input type number Thousand separator, adding a thousand separator to a input field in angular4, import { Directive, ElementRef, forwardRef, HostListener, Input, OnDestroy } from '@angular/core';� Input field 1 (after entering 2 or 3 charcters here it will get the field content from a mysql database and after pressing ENTER it should create additional input text field. I'd like to implement the comma separated thousands when I input numbers inside INPUT tag or after input numbers. Thus using a format code of "#,##0.

Internationalized: Used the decimal separator and the thousands separator defined in the client browser configuration. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. Lately, I am studying about angular 4 because there is an ERP project in the company where I work.

Comments
  • thousand seperator means?
  • this might help you blog.ngconsultant.io/…
  • @LakshmiPrasanna when the user type the number it should be automatically break into 3 digits(Ex - 1,000,000)
  • You have taken number pipe completely in wrong way. You have o right your own pipe to get that. you can find code here : stackoverflow.com/questions/44672225/…
  • Break pattern with value 542,867
  • consider explaining why your answer works and how it solves the asker's problem