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.

Read Also:  ng-maxlength using Angular Example

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.

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

Read Also:  Image Uploads with Angular 9 Tutorial

Textbox Should Accept only Numbers in Angular

Solution:

this.form = fb.group({

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

})

src/app/app.component.html

<div class="wrap jdk-form container">
    <h1>Angular Validation for Number Only - Pakainfo.com.com</h1>
        
    <form [formGroup]="form" (ngSubmit)="submit()">
            
        <div class="form-group">
            <label for="number">Number</label>
            <input 
                formControlName="number"
                id="number" 
                type="text" 
                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>
            </div>
        </div>
        
        <button class="btn btn-success" type="submit" [disabled]="!form.valid">Submit</button>
    </form>
</div>

src/app/app.component.ts

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

Web Programming Tutorials Example with Demo

Read :

Read Also:  ng-app Directive with Name using Angular Example

Summary

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 infinityknow.com 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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Angular Dynamic Add ng-click function
  2. Read Also:  How to Convert String to Object in Angularjs?
  3. Read Also:  Adding Toastr Notifications in Angular 9 Tutorial
  4. Read Also:  Date Filter Using Angular Example with Demo
  5. Read Also:  Radio Buttons Validation using Angular Example
  6. Read Also:  ng-mouseover Event using Angular Example
  7. Read Also:  Directives with Module using Angular Example
  8. Read Also:  Date Filter Using Angular Example with Demo
  9. Read Also:  Radio Buttons Validation using Angular Example
  10. Read Also:  ng-mouseover Event using Angular Example
CLOSEX