How to restrict alphabets and special characters input in textbox Angular 7?
Stayed Informed - Allow Only Numeric Input in Textbox in Angular 7
I am sharing an example for allowing only numbers in Textbox Angular 7, following steps involved:-
1. Create Angular directive to allow only numbers input
2. Import this directive in module
3. Use the above-created directive in your components to apply this
Let’s see the example –
Create Directive to allow only numbers input –
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
selector: '[numbersOnly]'
})
export class OnlynumberDirective {
constructor(private _el: ElementRef) { }
@HostListener('input', ['$event']) onInputChange(event) {
const initalValue = this._el.nativeElement.value;
this._el.nativeElement.value = initalValue.replace(/[^0-9]*/g, '');
if ( initalValue !== this._el.nativeElement.value) {
event.stopPropagation();
}
}
}
Import directive in NgModule –
import { OnlynumberDirective } from '../app/directive/onlynumber.directive';
import { OnlyNumericDirective } from './directive/only-numeric.directive';
@NgModule({
declarations: [
AppComponent,
OnlynumberDirective,
OnlyNumericDirective
],
imports: [
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
Components – The Amount field should be only number input by using the directive - numbersOnly
<input type="text" numbersOnly required [(ngModel)]="model.Amount" id="Amount" name="Amount" class="form-control" placeholder="Amount">
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|