Angular Validation for Textbox to Accept Only Numbers

Today, We want to share with you Angular Validation for Textbox to Accept Only Numbers.In this post we will show you Textbox Should Accept only Numbers in Angular, hear for allow only numbers and decimal in textbox angularjs we will give you demo and example for implement.In this post, we will learn about angularjs: allows only numbers to be typed into a text box with an example.

Angular Validation for Textbox to Accept Only Numbers

There are the Following The simple About Directive to Allow Only Numbers Using Angula Full Information With Example and source code.

As I will cover this Post with live Working example to develop Angular Numeric Validation: Allow only Numbers (Digits) in TextBox, so the Angular 5 – Only Number Input, Only Number Decimal is used for this example is following below.

Also Read This πŸ‘‰   How to Create a Currency Converter using Pipe with Angularjs?

Angular is a platform for building mobile & desktop web Based user friendly and light weight applications.Angular,It’s TypeScript-based open-source Angularjs web application framework.

Keywords : allow user to enter only numbers in textbox using angular, angular number validation pattern, allow only numbers in textbox angular, angular validation for number only, textbox should accept only numbers in angular

Textbox Should Accept only Numbers in Angular


this.form ={

  number: ['', [Validators.required, Validators.pattern("^[0-9]*$")]]



<div class="wrap jdk-form container">
    <h1>Angular Validation for Number Only -</h1>
    <form [formGroup]="form" (ngSubmit)="submit()">
        <div class="form-group">
            <label for="number">Number</label>
                class="form-control dsp">
            <div *ngIf="f.number.touched && f.number.invalid" class="alert alert-danger">
                <div *ngIf="f.number.errors.required">Please Eneter Number is required.</div>
                <div *ngIf="f.number.errors.pattern">Enter only number.</div>
        <button class="btn btn-success" type="submit" [disabled]="!form.valid">Submit</button>


import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators} from '@angular/forms';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  form: FormGroup = new FormGroup({});
  constructor(private fb: FormBuilder) {
    this.form ={
      number: ['', [Validators.required, Validators.pattern("^[0-9]*$")]]
  get f(){
    return this.form.controls;

Web Programming Tutorials Example with Demo

Read :

Also Read This πŸ‘‰   Automatically Angularjs Set focus input from controller


You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Angular 7 Directive – Allow Only Numbers Input in TextBox Example.
I would like to have feedback on my blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.