使用自定义验证器限制角度反应形式中的特殊字符答案

【问题标题】：Restrict special characters in angular reactive forms using custom validators使用自定义验证器限制角度反应形式中的特殊字符
【发布时间】：2019-12-13 14:52:05
【问题描述】：

我想使用自定义验证器限制角度反应形式中的特殊字符。我在堆栈溢出中进行了搜索，但没有按预期工作。

HTML.TS
<input matInput placeholder="no symbols" formControlName="symbols" [errorStateMatcher]="matcher">
  <mat-error *ngIf="signupForm.controls['symbols'].hasError('symbols')">
    symbols are not allowed
  </mat-error>

CUSTOM VALIDATOR.TS
export function symbolsOnly(control: AbstractControl) {
    if ( /^[^`~!@#$%\^&*()_+={}|[\]\\:';"<>?,./]*$/.test(control.value)) {
      return { symbols: true };
    }
    return null;
    }

COMPONENT.TS
 'symbols':new FormControl("",[symbolsOnly])

有人可以帮助我了解如何使用自定义验证器限制角度反应形式中的特殊字符

【问题讨论】：

不需要自定义验证器，您可以使用 Validators.pattern 针对正则表达式测试字符串
将自定义验证器函数放在组件文件中或使其成为静态，因此您可以在组件中使用类名。

标签： angular

【解决方案1】：

您在有效状态下返回错误，试试这个

export function symbolsOnly(control: AbstractControl) {
    if ( !/^[^`~!@#$%\^&*()_+={}|[\]\\:';"<>?,./]*$/.test(control.value)) {
      return { symbols: true };
    }
    return null;
    }

【讨论】：

非常感谢它成功了，如果我想添加最小和最大字符数，例如 ` if ( !/^[^~!@#$%\^&*()_+={}|[\]\\:';"<>?,./]*${4,20}/.test(control.value)) { it throws me error 。你有什么想法吗？如何为此自定义验证器添加最小值和最大值。提前致谢

【解决方案2】：

这是给你的例子这会进行特殊字符验证

  symbols: ["", Validators.compose([Validators.pattern("^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9  !\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~€£¥₩])(?=.*?[A-Z 0-9]).{8,}$"), Validators.required])],

【讨论】：

【解决方案3】：

在component.ts中

//Validates that the field only contains letters or digits, you can modify the regex accordingly

const symbols = new FormControl('', Validators.pattern('[a-zA-Z0-9]*'));

console.log(symbols.errors); // {pattern: {requiredPattern: '^[a-zA-Z0-9]*$',actualValue: ''}}

供参考https://angular.io/api/forms/Validators#pattern

【讨论】：

【解决方案4】：

您的方式是仪式，但您应该使用ValidatorFn 接口返回反应式formControl 的错误映射。

组件中的反应式表单字段。

field1 : new FormControl('',forbiddenStringValidator(regex))

为自定义验证和客户验证器创建单独的文件

export function forbiddenStringValidator(stringRe: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const forbidden = stringRe.test(control.value);
    return forbidden ? {'forbiddenString': {value: control.value}} : null;
  };

[注意]：正则表达式要按要求来。

【讨论】：