Prevent html input accept "لا" char

Question

I'm working on an Angular app, and I have an input that shouldn't accept any character except for English letters, numbers and some symbols.

I prevent the input from accepting arabic letters by creating a directive and creating a regex to check the user input:

if !myRegex.test(event.key)
event.preventDefault()

And it works, but when insert this letter "لا" which is a compound letter, the check catches it, but the input is filled with this letter "ا".

Any suggestions solve this problem?

By using directive, the input is linked to property ngModel, so I can't add a validator to it like with a form control.

Answer 1

1. Approach

   import { Directive } from '@angular/core';
   
   @Directive({
     standalone: true,
     selector: '[onlyASCII]',
     host: { '(input)': 'onInputChange($event)' },
   })
   export class OnlyAsciiDirective {
     onInputChange(event: any) {
       event.srcElement.value = event.srcElement.value.replace(
         /[^a-zA-Z0-9]/g,
         ''
       );
     }
   }

   <input onlyASCII />

2. Approach Instead of using the ngModel Directive, you can create your own Directive with Input and Output which works same as the ngModel Directive. There you can place your Regex and no char you dont want are into your variable in your ts file.

import {
  Directive,
  ElementRef,
  EventEmitter,
  Input,
  OnChanges,
  Output,
  SimpleChanges,
  inject,
} from '@angular/core';

@Directive({
  standalone: true,
  selector: '[notThisChar]',
  host: { '(input)': 'onInputChange($event)' },
})
export class NotThisCharDirective implements OnChanges {
  @Input('notThisChar') notThisChar?: string;
  @Output('notThisCharChange') notThisCharChange = new EventEmitter<string>();

  private el = inject(ElementRef);

  ngOnChanges(changes: SimpleChanges): void {
    this.el.nativeElement.value = changes['notThisChar'].currentValue;
  }

  onInputChange(event: any) {
    event.srcElement.value = event.srcElement.value.replace(
      /[^a-zA-Z0-9]/g,
      ''
    );
    this.notThisCharChange.emit(event.srcElement.value);
  }
}

<input [(notThisChar)]="test" />

2. Approach with Signal:

import { Directive, ElementRef, OnInit, inject, model } from '@angular/core';

@Directive({
  standalone: true,
  selector: '[notThisCharSignal]',
  host: { '(input)': 'onInputChange($event)' },
})
export class NotThisCharSignalDirective implements OnInit {
  notThisCharSignal = model.required<string>();

  private el = inject(ElementRef);

  ngOnInit(): void {
    this.el.nativeElement.value = this.notThisCharSignal();
  }

  onInputChange(event: any) {
    event.srcElement.value = event.srcElement.value.replace(
      /[^a-zA-Z0-9]/g,
      ''
    );
    this.notThisCharSignal.set(event.srcElement.value);
  }
}

<input [(notThisCharSignal)]="test" />