在在线正则表达式测试人员中工作时，正则表达式无法在 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]))$/)

regex demo is here 。

确保:

您将正则表达式定义为 正则表达式文字 (不是字符串，/.../ 不应用任何引号括起来

如果使用字符串模式，请确保对反斜杠进行双重转义，然后不需要在两端使用 ^ 和 $，因为它们会自动添加。

上面的代码等于

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