How to create Custom Directive.

Ramco Ramco

I have textbox with numeric and text data type. I want that user should only enter numeric values or dot in numeric boxes. In text boxes user can enter only alphabets using custom directive.

Thanks

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Jignesh Kumar2y ago

Accepted answer

Hello Ramco,

You can follow the below steps to create a custom directive and use in the angular project,

1. Create directive typescript

ng generate directive alphanumeric

2. Create custom directory logic

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appAlphanumeric]'
})
export class AlphanumericDirective {

  private regex: RegExp = new RegExp(/^[a-zA-Z0-9]*$/);
  private specialKeys: Array = ['Backspace', 'Tab', 'End', 'Home', 'ArrowLeft', 'ArrowRight', 'Delete'];

  constructor(private el: ElementRef) { }

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    // Allow: navigation keys, backspace, delete, tab, escape, enter, etc.
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }

    // Do not allow if the key pressed doesn't match the regex
    const current: string = this.el.nativeElement.value;
    const next: string = current.concat(event.key);
    if (next && !String(next).match(this.regex)) {
      event.preventDefault();
    }
  }
}

3. use for text input,

4. Add to the module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AlphanumericDirective } from './alphanumeric.directive';

@NgModule({
  declarations: [
    AppComponent,
    AlphanumericDirective
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Naimish Makwana2y ago

Sure, you can create custom directives in Angular to restrict the input in textboxes. Here’s how you can do it:

import { Directive, ElementRef, HostListener } from '@angular/core';

// Directive for numeric input
@Directive({
  selector: '[numericInput]'
})
export class NumericInputDirective {
  private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);
  private specialKeys: Array = ['Backspace', 'Tab', 'End', 'Home', '-'];

  constructor(private el: ElementRef) { }

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }
    let current: string = this.el.nativeElement.value;
    let next: string = current.concat(event.key);
    if (next && !String(next).match(this.regex)) {
      event.preventDefault();
    }
  }
}

// Directive for alphabetic input
@Directive({
  selector: '[alphaInput]'
})
export class AlphaInputDirective {
  private regex: RegExp = new RegExp(/^[a-zA-Z]*$/g);
  private specialKeys: Array = ['Backspace', 'Tab', 'End', 'Home', '-'];

  constructor(private el: ElementRef) { }

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }
    let current: string = this.el.nativeElement.value;
    let next: string = current.concat(event.key);
    if (next && !String(next).match(this.regex)) {
      event.preventDefault();
    }
  }
}

You can use these directives in your HTML like this:

The numericInput directive will only allow numeric input and dots, and the alphaInput directive will only allow alphabetic input. Please replace '@angular/core' with the correct import path in your project. Also, don’t forget to declare these directives in your module.

Thanks

Rajendra Taradale2y ago
You can explore - https://www.c-sharpcorner.com/blogs/angular-reusable-loader-directive
+1

Jayraj Chhaya2y ago

To achieve this functionality, you can create custom directives in Angular. Below is an example of how you can create directives for numeric and text input validation:

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appNumeric]'
})
export class NumericDirective {
  constructor(private el: ElementRef) {}

  @HostListener('input', ['$event']) onInput(event: KeyboardEvent) {
    const input = this.el.nativeElement.value;
    this.el.nativeElement.value = input.replace(/[^0-9.]/g, '');
  }
}

Text Directive

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appText]'
})
export class TextDirective {
  constructor(private el: ElementRef) {}

  @HostListener('input', ['$event']) onInput(event: KeyboardEvent) {
    const input = this.el.nativeElement.value;
    this.el.nativeElement.value = input.replace(/[^a-zA-Z]/g, '');
  }
}

In your HTML template, apply the directives accordingly: