角度7：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。

请确保：

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

上面的代码等于

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

Answer 2

您只需要进行以下更改：

<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>