Как предотвратить появление определенных нажатий клавиш в поле ввода Angular реактивной формы

Question

Я добавляю проверку в некоторые поля ввода в моей форме, управляемой классом. Вот пример некоторых из моих полей ввода:

.html

<input matInput formControlName="{{ field?.controlName }}" maxLength="{{ field?.maxLength }}" placeholder="{{ field?.label }}">
<span matSuffix class="input-suffix">Required</span>

В браузере

Я хотел бы знать, как добавить функцию, которая предотвращает ввод любых специальных символов.

ПРИМЕЧАНИЕ: Я уже использую пользовательскую функцию проверки, которая выдает маленькое сообщение об ошибке, если какие-либо символы соответствуют регулярному выражению.

Однако я хочу, чтобы запрещенные символы даже не появлялись. Поэтому, если пользователь введет «%» или «&», ничего не произойдет. Кроме того, я хочу разрешить некоторые символы, такие как апострофы или гиперы.

Answer 1

A clean способ, поскольку вы используете угловой материал, это сделать настраиваемое поле формы .Это позволило бы ему плавно перетекать и использоваться как остальные поля формы.

При необходимости есть и другие варианты, например, ответы на этот похожий вопрос вопрос .

Answer 2

Это не будет соответствовать рекомендациям по доступности, вы должны взять все нажатые клавиши и затем предоставить пользователю легкую для понимания ошибку проверки, если какая-либо из нажатых клавиш недопустима для этого ввода. Игнорирование нажатых клавиш недопустимо в соответствии с рекомендациями по доступности.

Answer 3

Если вы хотите что-то универсальное, многоразовое и гибкое, вы можете написать для этого директиву, которая захватывает входные события и фильтры при необходимости, например:

 @Directive({
   selector: 'input[regexInput]',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
       useExisting: RegexInputDirective,
       multi: true
     }
   ]
 })
 export class RegexInputDirective implements ControlValueAccessor {
   private _regex: RegExp;
   @Input()
   set regexInput(regex: string | RegExp) {
     this._regex = (typeof regex === 'string') ? new RegExp(regex, "g") : regex;
   }

   constructor(private elementRef: ElementRef<HTMLInputElement>) { }

   writeValue(val: any): void { }

   onChange = (value: any) => {};

   onTouched = () => {};

   registerOnChange(fn: (val: any) => void): void {
     this.onChange = fn;
   }
   registerOnTouched(fn: any): void {
     this.onTouched = fn;
   }

   @HostListener('input', ['$event'])
   onInput(event: Event) {
     if (!this._regex) {
       throw new Error('RegExp required for regexInput');
     }
     let val = (<HTMLInputElement>event.target).value;
     let cleanVal = (val.match(this._regex) || []).join("");
     this.elementRef.nativeElement.value = cleanVal;
     this.onChange(cleanVal);
   }
 }

довольно прямолинейно, принимает входные данные регулярного выражения, привязывается к событию ввода и запускает сопоставление значения с предоставленным регулярным выражением, которое удалит все недопустимые символы.

Запутанные части могут быть элементами доступа к значению элемента управления ... это просто делает его совместимым с элементами управления формой и моделью ng и т. Д.

используйте как:

<input type="text" regexInput="[A-Za-z0-9]*">

Answer 4

Попробуйте это.
Угловой контроллер:

document.getElementById("id").onkeypress = function(e) {
    var str = String.fromCharCode(e.which);
    if ("%&".indexOf(str) >= 0)
        return false;
};

Ввод HTML:

<input type='text' id='id' value='' onpaste="return false"/>

Дайте мне знать, если это работает для вашей ситуации.