正则表达式在在线正则表达式测试器中无法在Angular Validators.pattern（）中工作

Posted 2023-01-19

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

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

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pbWd1ci5jb20vYkFRdW8wTi5qcGcifQ==” alt =“生产结果”>

答案

使用以下修复程序：

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

regex demo is here。

请确保：

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

上面的代码等于

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

另一答案

您只需要进行此更改：

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

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