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

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

场景：

如果用户尝试到输入型=“文本”输入特殊字符，应被阻止进入？

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

来源

2016-06-21 mani R

请参见本 - http://stackoverflow.com/questions/34559212/how-to-add-form-validation-pattern-in-angular2 – Sanket

@Sanket，validat离子模式动态变化，但我的输入控制行为不应该允许用户输入为该控件提到的模式 –

此方法可能适用于您http://stackoverflow.com/questions/37800841/input-mask-fields-in -angular2-forms –

代码，这如下所示固定插入位置问题
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; 
} 
}

来源

2016-09-27 07:43:32

您可以创建一个自定义的验证，

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'])])

来源

2017-04-15 08:30:06

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

回答

相关问题