Chặn việc nhập ký tự đặc biệt trong Angular

Để chặn việc nhập kí tự đặc biệt trong Angular, bạn có thể sử dụng Directive. Directive cho phép bạn thay đổi cách mà các thành phần DOM (Document Object Model) trong ứng dụng Angular của bạn hoạt động (tìm hiểu về Built-in directives).

Dưới đây là cách tạo một Directive đơn giản để chặn ký tự đặc biệt trong Angular trong các trường nhập liệu của bạn:

Tạo Directive mới bằng cách sử dụng Angular CLI:

ng generate directive specialCharacterFilter

Sau khi thực hiện lệnh trên, Angular CLI sẽ tạo ra một Directive mới có tên specialCharacterFilter.

Thêm mã để chặn ký tự đặc biệt trong Angular

Mở file special-character-filter.directive.ts:

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

@Directive({
  selector: '[appSpecialCharacterFilter]'
})
export class SpecialCharacterFilterDirective {

  constructor(private el: ElementRef) { }

  @HostListener('input', ['$event']) onInputChange(event: KeyboardEvent) {
    const inputElement = event.target as HTMLInputElement;
    const sanitizedValue = this.sanitizeInput(inputElement.value);
    if (sanitizedValue !== inputElement.value) {
      inputElement.value = sanitizedValue;
    }
  }

  private sanitizeInput(input: string): string {
    // Chặn các ký tự đặc biệt bằng cách sử dụng biểu thức chính quy
    const sanitizedValue = input.replace(/[^\w\s]/gi, '');
    return sanitizedValue;
  }

}

Trong Directive trên, chúng ta đã sử dụng @HostListener để lắng nghe sự kiện input trên các trường nhập liệu. Khi sự kiện này xảy ra, chúng ta kiểm tra giá trị đầu vào và loại bỏ tất cả các ký tự đặc biệt sử dụng biểu thức chính quy RegExp (/[^\w\s]/gi).

Sử dụng Directive trong template của component:

<input type="text" appSpecialCharacterFilter>

Bây giờ, khi người dùng nhập các ký tự đặc biệt vào trường input, chúng sẽ tự động bị loại bỏ và không xuất hiện trong trường input.

Lưu ý rằng, Directive trên chỉ chặn các ký tự đặc biệt như dấu chấm, dấu phẩy, dấu cách, chấm than, v.v. Nếu bạn muốn chặn các loại ký tự khác, bạn có thể tùy chỉnh biểu thức chính quy trong phương thức sanitizeInput().