Encountering an issue with pattern matching validation in Angular 14. A dynamic text component supports various types of text input, and custom pattern validation can be added as needed.
Here's the configuration for a text box with type=monetary
case InputType.Monetary:
response.icon = response.icon ?? 'attach_money-outlined';
response.iconPosition = response.iconPosition ?? LayoutPositions.Left;
response.placeholder = response.placeholder ?? '0.00';
response.validationPattern = response.validationPattern ?? /^(\d{1,3}(,\d{3})*|(\d+))(.\d{2})?$/gm;
response.patternErrorText = response.patternErrorText ?? 'Please enter a valid dollar amount';
response.mask = response.mask ?? this.currencyInputMask;
break;
This is how it's implemented
if (response?.validationPattern) {
this.form.get(response.responseId)?.setValidators(Validators.pattern(response.validationPattern));
}
The problem arises when there is an even number of characters in the text field; it always shows as invalid. Strangely, when there is an odd number of characters, it behaves correctly. I've checked the regex thoroughly and believe that isn't the culprit. See attached screenshots demonstrating the issue:
Troubleshooting steps taken:
- Testing alternate regex patterns
- Using regex as a string instead of RegEx type
- Applying the regex directly rather than storing it in a variable