正在进行Angular 2表单验证。如何防止用户在输入文本框中输入特殊字符？

角度2表单验证

情景：

如果用户试图在输入type=“text”中输入特殊字符，是否应阻止其输入

---

特殊字符不应出现在相应的文本框中

下面显示的代码修复了插入符号位置问题 1.在主机侦听器中将事件类型更改为“（输入）。
2.在类内部定义插入符号的开始和结束位置，它解决了这个问题

@Directive({
selector: '[ngModel][maskSpecialCharacter]',
host: {
    '(ngModelChange)': 'onInputChange($event)',
    '(input)': 'onInputChange($event.target.value, true)'
 }
})
      export class SpecialCharacterMask {
         constructor(public model: NgControl, public ele: ElementRef, public render: Renderer) { }

onInputChange(event, backspace) {
    var position = this.ele.nativeElement.selectionStart;
    var value = event.replace(/[!$%^&*()+|~=`{}\[\]:";#@'<>?,.\/\\]/gi, '');
    this.render.setElementProperty(this.ele.nativeElement, "value", value);
    this.ele.nativeElement.selectionEnd = position;
}
}

@指令({
选择器：“[ngModel][maskSpecialCharacter]”，
主持人:{
“（ngModelChange）”：“onInputChange（$event）”，
'（输入）''onInputChange（$event.target.value，true）'
}
})
导出类SpecialCharacterMask{
构造函数（公共模型：NgControl，公共元素：ElementRef，公共呈现：呈现器）{}
onInputChange（事件，退格）{
变量位置=this.ele.nativeElement.selectionStart；
var value=event.replace（/[！$%^&*（）+| ~=`{}\[\]：“；\\@'？，.\/\]/gi，”）；
this.render.setElementProperty（this.ele.nativeElement，“value”，value）；
this.ele.nativeElement.selectionEnd=位置；
}
}

您可以创建自定义验证器

import { FormControl } from '@angular/forms'

export function restrictedWords(words) {
    return (control: FormControl): { [key: string]: any } => {
        if (!words) return null
        var invalidWords = words.map(w => control.value.includes(w) ? w : null)
            .filter(w => w != null)
        return invalidWords && invalidWords.length > 0
            ? { 'restrictedWords': invalidWords.join(', ') }
            : null
    }
}

从表单中调用自定义验证器函数

this.textBox1 = new FormControl('',[Validators.required, Validators.maxLength(400), restrictedWords(['foo','bar'])])

---

角反应形式的方法：

需要在表单验证中添加验证器。 此外，下面的正则表达式不适用于国际化。请根据需要更改正则表达式

    this.form= this.formBuilder.group({
        name: ['', [ Validators.required, Validators.pattern(/^[a-zA-Z0-9!@#$%^&*()]+$/)] ],
        description: ['']
    });

请注意，Validators.pattern方法不需要引号

方法2

export function isSecuredInput(input: string): boolean {
    const tagBody = '(?:[^"\'>]|"[^"]*"|\'[^\']*\')*';
    const tagOrComment = new RegExp(
        '<(?:'
        // Comment body.
        + '!--(?:(?:-*[^->])*--+|-?)'
        // Special "raw text" elements whose content should be elided.
        + '|script\\b' + tagBody + '>[\\s\\S]*?</script\\s*'
        + '|style\\b' + tagBody + '>[\\s\\S]*?</style\\s*'
        // Regular name
        + '|/?[a-z]'
        + tagBody
        + ')>',
        'gi');

    return input.search(tagOrComment) === -1 ? true : false;
}

形式是

this.form = this.formBuilder.group({
        name:  new FormControl('', {
            validators: [Validators.required, this.isValidInput()],
            updateOn: 'change'
        })
})

源IsSecurity来自

尝试将模式用作

 this.form= this.fb.group({
        name: ['', [Validators.pattern('[a-zA-Z0-9 ]')]],
 });

---

请参考此-@Sanket，验证模式会动态更改，但我的输入控制行为不应允许用户输入该控制所述的模式此方法可能适用于您@GünterZöchbauer上述方法效果良好。现在，我面临验证掩码插入符号位置的问题。当我键入一些字符串时输入[type=“text”]。使用该验证掩码指令，我尝试用匹配的模式替换输入字符串。场景：当我尝试从输入[type=“text”]中输入的字符串中间进行编辑时（将插入符号位置置于字符串之间），插入符号位置移到最后。它不允许在字符串中间更改。抱歉，我不知道。可能是其他人。复制插入符号也可能有帮助。

 this.form= this.fb.group({
        name: ['', [Validators.pattern('[a-zA-Z0-9 ]')]],
 });