處理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表單驗證。如何防止用戶在輸入文本框中輸入特殊字符？

回答

相關問題