This tutorial will give you example of allow user to enter only numbers in textbox using angular. it's simple example of angular number validation pattern. let’s discuss about allow only numbers in textbox angular. This tutorial will give you simple example of angular validation for number only. follow bellow step for textbox should accept only numbers in angular.
You can use number validation pattern in angular 6, angular 7, angular 8 and angular 9 application.
I will give you full example of how to implement validation for enter number only in angular application. textbox should accept only numbers in angular using reactive form. you can also see bellow preview for validation.
Solution:
this.form = fb.group({
number: ['', [Validators.required, Validators.pattern("^[0-9]*$")]]
})
Example:
src/app/app.component.html
<div class="container">
<h1>Angular Validation for Number Only - HDTuto.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">
<div *ngIf="f.number.touched && f.number.invalid" class="alert alert-danger">
<div *ngIf="f.number.errors.required">Number is required.</div>
<div *ngIf="f.number.errors.pattern">Enter only number.</div>
</div>
</div>
<button class="btn btn-primary" 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);
}
}
I hope it can help you...
Do you like below Tutorials ?
- Laravel 7.x and 6.x Ajax Multiple Image Upload with Preview Example
- Laravel select with count(*) using db raw example
- PHP Laravel select with join subquery example
- PHP Laravel Ajax Form Submit Example
- How to create events for created/updated/deleted model task in Laravel 5?
- Angular JS Form Validation Example Code
- AngularJS - Confirm Password Validation Example
- Laravel Ajax Request using X-editable bootstrap Plugin Example