在在线正则表达式测试器中工作时，正则表达式无法在 Angular Validators.pattern() 中工作答案

【问题标题】：Regex not working in Angular Validators.pattern() while working in online regex testers在在线正则表达式测试器中工作时，正则表达式无法在 Angular Validators.pattern() 中工作
【发布时间】：2019-05-12 09:17:48
【问题描述】：

我已经在 Regex101.com 上编写并严格测试了一个正则表达式，但在我的 FormControl Validators.pattern 方法中实施时，它显示出意外的行为。

这是要邮寄包裹的宽度输入。只有正值，最多 2 位小数，最小值为 (0.01)，最大值稍后针对 API 响应进行测试（不相关）。

package_validation_messages = {
   'maxWidth': [
      {type: 'required', message: 'Width is required.'},
      {type: 'pattern', message: 'Invalid Width.'}
   ]
};

this.packageSizeForm = this.formBuilder.group({
   maxWidth: new FormControl('', Validators.compose([
      Validators.pattern('^([+]?(([1-9]\d*(\.\d{1,2})?)|0\.(([1-9]\d?)|(\d[1-9]))))$'),
      Validators.required
   ]))
});

<div>
   <input formControlName='maxWidth' type='text' required />

   <span *ngFor="let validation of package_validation_messages.maxWidth">
      <span *ngIf="packageSizeForm.get('maxWidth').hasError(validation.type) && (packageSizeForm.get('maxWidth').dirty || packageSizeForm.get('maxWidth').touched)">{{validation.message}}</span>
   </span>
</div>

下面的截图展示了我在 Regex101.com 上的测试；你可以看到所有应该通过和失败的场景。

但是，正如您在此处看到的，任何多位数的值都不符合模式，这与上述预期行为相反。

【问题讨论】：

Validators.pattern(/^([+]?(([1-9]\d*(\.\d{1,2})?)|0\.(([1 -9]\d?)|(\d[1-9]))))$/) 试试这个

标签： regex angular typescript

【解决方案1】：

使用以下修复：

Validators.pattern(/^\+?(?:[1-9]\d*(?:\.\d{1,2})?|0\.(?:[1-9]\d?|\d[1-9]))$/)

regex demo is here。

确保：

您将正则表达式定义为 正则表达式文字（不是字符串，/.../ 不应用任何引号括起来
如果您使用字符串模式，请确保对反斜杠进行双重转义，然后，您不需要在两端使用 ^ 和 $，因为它们会自动添加。

上面的代码等于

Validators.pattern("\\+?(?:[1-9]\\d*(?:\\.\\d{1,2})?|0\\.(?:[1-9]\\d?|\\d[1-9]))")

【讨论】：