Question

我正在以我的反应性类驱动的形式向某些输入字段添加验证。这是我的一些输入字段的示例：

.html

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

在浏览器中

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

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

但是，我希望它可以防止出现限制字符。因此，如果用户键入“％”或“＆”，则不会发生任何事情。另外，我想允许一些字符，例如撇号或连字符。

Answer 1

自从使用角形材料以来，干净的一种方法是进行custom form field。这样一来，它就可以流畅地流动，并且可以像其他表单字段一样使用。

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

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

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

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

这将导致可访问性准则失效，如果按下的任何键对该输入无效，则应按下所有的键，然后向用户提供易于理解的验证错误。根据辅助功能指南，不允许忽略按键。

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

4 个答案: