Angular 形成精确的 10 个字母数字字母模式验证

Question

我在反应式表单字段验证的这个特定用例中遇到以下问题。

目前我只设置了这条规则：

this.projectForm = this.fb.group({
  .....................................................................................,
  .....................................................................................,
  .....................................................................................,
  CIG: [null, [Validators.required, Validators.minLength(10),Validators.maxLength(10)]],

目前我正在检查插入到我的 CIG 表单字段中的值是否恰好有 10 个字符作为长度。

我的问题是我还必须检查这是一个字母数字字符串（正好由 10 个字符组成）。

所以这样的事情是允许的：ABCED12345 但是这样的事情是不允许的：ABCD-12345

如何使用 验证器 实现此行为？我需要使用 REGEX 或类似的东西吗？

Answer 1

您可以使用 Angular 反应形式 Pattern Validators 来实现这一点。

validPattern = "^[a-zA-Z0-9]{10}$"; // alphanumeric exact 10 letters
this.projectForm = this.fb.group({
 ...
 CIG: [null, [Validators.required, Validators.pattern(this.validPattern)],

希望这能解决您的问题。

Answer 2

如果您想更好地控制错误消息，您也可以创建自己的自定义验证器函数，并将其添加到您的验证器数组中。这样的函数可以是这样的：

import { FormControl, ValidationErrors } from '@angular/forms';

const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9_]*$/;
const ALPHA_NUMERIC_VALIDATION_ERROR = { alphaNumericError: 'only alpha numeric values are allowed' }

function alphaNumericValidator(control: FormControl): ValidationErrors | null {
    return ALPHA_NUMERIC_REGEX.test(control.value) ? null : ALPHA_NUMERIC_VALIDATION_ERROR;
}

并将其添加到您的验证器列表中，如下所示：像这样：

[Validators.required, Validators.minLength(10),Validators.maxLength(10), alphaNumericValidator]

有关 angular 自定义验证器的更多信息： custom validators

Angular 形成精确的 10 个字母数字字母模式验证

Angular Form exact 10 alphanumeric letters pattern validation

angular-validation

angular

angular-reactive-forms