限制用户在输入字段angular 12中输入特定值

import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  template: `
    <input type="text" [formControl]="myControl">
    <p *ngIf="myControl.errors && myControl.errors.pattern">
      只能输入数字
    </p>
  `,
})
export class MyComponent implements OnInit {
  myControl: FormControl;

  ngOnInit() {
    this.myControl = new FormControl('', [
      Validators.pattern('^[0-9]*$')
    ]);
  }
}

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

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

  @HostListener('input')
  onInput() {
    const inputValue: string = this.el.nativeElement.value;
    if (inputValue !== 'abc') {
      this.el.nativeElement.value = 'abc';
    }
  }
}