如何防止某些击键出现在 Angular 反应式表单输入字段中答案

【问题标题】：How to prevent certain keystrokes from appearing in an Angular reactive form input field如何防止某些击键出现在 Angular 反应式表单输入字段中
【发布时间】：2019-07-11 21:25:23
【问题描述】：

我正在向我的反应式类驱动表单中的一些输入字段添加验证。这是我的一些输入字段的示例：

.html

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

在浏览器中

我想知道如何添加防止输入任何特殊字符的功能。

注意：我已经在使用自定义验证器函数，如果任何字符与正则表达式匹配，该函数将引发一条小错误消息。

但是，我希望它能够防止出现受限字符。因此，如果用户键入 '%' 或 '&' 什么都不会发生。另外，我想允许一些字符，例如撇号或连字符。

【问题讨论】：

指令是你最好的选择

标签： angular angular-material angular-reactive-forms

【解决方案1】：

一种干净的方法，因为您使用的是角度材料，所以是custom form field。这将使它能够很好地流动并像其他表单字段一样使用。

如果需要，还有其他选项，例如类似question 的回答。

【讨论】：

【解决方案2】：

试试这个。
角度控制器：

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"/>

让我知道这是否适合您的情况。

【讨论】：

【解决方案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]*">

【讨论】：

【解决方案4】：

这将不符合无障碍指南，您应该按下所有键，然后如果按下的任何键对该输入无效，则向用户提供易于理解的验证错误。无障碍指南不允许忽略按下的键。

【讨论】：