Angular 2:Validators.pattern()不起作用

Question

我试图使用模式验证输入类型="文本",我只想要文本.

零件 :

 this.from = this.fb.group({
  name: ['',[Validators.required,Validators.pattern('/^[a-zA-Z]+$/')]],

});

Html:

<input type="text" formControlName="name"/> // omitting other html template like from tag.

以上模式验证对我不起作用,它将始终返回无效状态.

Answer 1

将模式作为字符串传递,没有/它是正则表达式的分隔符

Validators.pattern('^[a-zA-Z]+$')

Answer 2

切记不要这样做:

Validators.pattern("[A-Z]{1,2}[0-9][0-9A-Z]?\s?[0-9][A-Z]{2}")

问题是你需要在s之前使用双反斜杠来击败字符串逃逸:

Validators.pattern("[A-Z]{1,2}[0-9][0-9A-Z]?\\s?[0-9][A-Z]{2}")

Answer 3

emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
this.form = fb.group({
      Email : new FormControl({value: null}, Validators.compose([
        Validators.required,
        Validators.pattern(this.emailRegex)]))
});

Answer 4

我在不同的模式下遇到了同样的问题：

^\d{1,4}$

我像这样使用它：

^\d{1,4}$

问题是必须将反斜杠\转义，所以正确的形式是：

Validators.pattern("^\d{1,4}$") // wrong

Answer 5

这是我在使用时发现的Validators.pattern():

作品

Validators.pattern('[a-z]{2}')
Validators.pattern(/^[a-z]{2}$/)

不行

Validators.pattern(/[a-z]{2}/i)
Validators.pattern(/[a-z]{2}/)

Answer 6

您可以将验证器作为字符串或正则表达式传递，如果操作正确，两者都可以工作。让我们只考虑需求文本：

作为正则表达式

const regex = /[a-zA-Z]*/;
let formControl = new FormControl('', Validators.pattern(regex));

在 a 中，如果找到任何与正则表达式匹配的内容（子字符串），FormControl验证器将设置状态。VALID因此，我们需要指定输入的开头和结尾以强制精确匹配，通过^和$：

const regex = /^[a-zA-Z]*$/;

这将返回VALID满足 OP 要求的单个单词。但是，它将返回INVALID包含空格、逗号、标点符号和连字符的较​​长文本。因此，如果我们愿意，我们可以将它们添加到字符集中：

const regex = /^[a-zA-Z,.\s-]*$/;

i由于我们使用的是正则表达式，因此我们可以通过在末尾设置标志来简化字符集。这告诉正则表达式忽略区分大小写，因此仅使用一个字符范围就足够了：

const regex = /^[a-z,.\s-]*$/i;

上述正则表达式适用VALID于任何包含大写、小写、空格、标点符号和逗号的文本。如果您还想接受感叹号和问号，只需将它们添加到字符集中即可：

const regex = /^[a-z,.!?\s-]*$/i;

作为字符串

将验证器表达式作为字符串传递时，不使用正则表达式分隔符/ /，并且不能传递正则表达式标志。因此，我们必须在集合中包含大写和小写字符。正如其他人指出的那样，您还必须转义字符串中的任何反斜杠。

作为字符串的等效验证器如下所示：

const validatorString = '^[a-zA-Z,.!?\\s-]*$';
let formControl = new FormControl('', Validators.pattern(validatorString));

请注意，如果在表达式作为字符串传递时省略^and ，Angular 将在处理验证器时自动添加它们。$这就是为什么将表达式作为字符串传递通常看起来比正则表达式效果更好。就我个人而言，我更喜欢正则表达式而不是字符串。

为了更好地理解正则表达式的概念，我强烈推荐这个网站： https: //regexr.com/