在在线正则表达式测试器中工作时，正则表达式在Angular Validators.pattern（）中不起作用

Question

我已经在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上进行的测试；您可以看到所有应该通过和失败的方案。

但是，正如您在此处看到的，与上面的预期行为相反，任何多位数的值都会使模式失败。

Answer 1

使用以下修复程序：

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

在正则表达式的演示是在这里。

确保：

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

上面的代码等于

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