Validators.pattern在模式中添加额外的^和$

Question

我正在使用Validators.pattern来检查在我的表单中提交的name仅包含字母。我添加的模式是lastName:[null,[Validators.required,Validators.pattern('[A-Za-z]+')]]。但是我注意到，如果出现错误，错误消息将包含额外的^和$。为什么？代码示例位于https://stackblitz.com/edit/angular-xesgxe

在1字段中添加了无效名称（例如Last Name）（不是First Name，因为我正在使用其他验证器。您将看到错误The required pattern is: ^[A-Za-z]+$在模式为^

时，请注意错误字符串中额外的$和[A-Za-z]+

检查createForm()中的signup-component.component.ts功能。寻找第lastName:[null,[Validators.required,Validators.pattern('[A-Za-z]+')]]

行

错误消息来自ShowErrorsComponent。在类{{1}中的'pattern': (params) => 'The required pattern is: ' + params.requiredPattern中检查errorMessages。

Answer 1

因为这是使正则表达式模式与整个输入匹配的方式（^-代表行首，$代表行尾）。

否则，您的模式[A-Za-z]+会在以下字符串中找到匹配项：123a，因此验证程序会说该字符串有效。

编辑：查看代码（https://github.com/angular/angular/blob/master/packages/forms/src/validators.ts#L293），似乎可以通过传递RegExp而不是字符串来使用所需的确切模式：

Validators.pattern(/[A-Za-z]+/)

我的猜测是他们添加了此行为，因为输入中的pattern属性的作用相同（https://www.w3schools.com/tags/att_input_pattern.asp）。

另请参阅：Should I use ^ and $ in html5 input regex pattern validation?