Decimal Number validation and apply the Currency Format in Angular

We discuss how we can validate the decimal number and also format the number as per the locale of the application.

We usually create a custom validator for numeric validation and the custom directive to format the number(120,875,256.25).

But here, we do not create any custom validator/directive to fulfill the need.

We use RxwebValidators to validate the decimal value as well as format the number.
RxwebValidator is available through @rxweb/reactive-form-validators package, this provides a lot of validators to fulfill the application needs, But we only discuss the numeric validator.

We have to install the package of @rxweb/reactive-form-validators to avail the services of RxwebValidators.

npm install @rxweb/reactive-form-validators

Once it's installed, we have to register the 'RxReactiveFormsModule' in the root module.

Let's do that.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import {  RxReactiveFormsModule } from "@rxweb/reactive-form-validators"
@NgModule({
  imports:      [ BrowserModule, FormsModule,ReactiveFormsModule,RxReactiveFormsModule ],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Now, We have to create the FormGroup as per the standard approach and we apply the numeric validator on the amount FormControl.

        this.userInfoFormGroup = this.formBuilder.group({
            amount:['', RxwebValidators.numeric()], 
        });

As per the above code, we have applied the numeric validator on the amount FormControl. This will validate the numeric value, if someone enters the value other than numeric then the FormControl will be invalid.

But wait, our need is to validate the decimal value as well and format the number. For that, we have to pass two parameters in the numeric validator.

        this.userInfoFormGroup = this.formBuilder.group({
            amount:['', RxwebValidators.numeric({allowDecimal:true,isFormat:true})], 
        });

allowDecimal property allows to user to enter the decimal value as well and isFormat is for format the numeric value as per the application locale. The format will be applied once the user moves to the another control.

Here is the complete code of the component.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from "@angular/forms"
import { RxwebValidators } from '@rxweb/reactive-form-validators';

@Component({
    selector: 'app-numeric-add-validator',
    templateUrl: './numeric-add.component.html'
})
export class NumericAddValidatorComponent implements OnInit {
    userInfoFormGroup: FormGroup

    constructor(
        private formBuilder: FormBuilder )
    { }

    ngOnInit() {
        this.userInfoFormGroup = this.formBuilder.group({
            amount:['', RxwebValidators.numeric({allowDecimal:true,isFormat:true})], 
        });
    }
}

All Done!.

You can refer to the stackblitz example of the numeric validator.

Binds the HTML as per the standard practice of angular reactive forms.

If you have any question/suggestion, Please share your comments below.