1

I am having an issue with pattern matching validation in angular 14. I have a dynamic text component that can support multiple different types of text input and custom pattern validation can be appended if need be. Here is the setup of a text box for 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;

And here is how it is being applied

      if (response?.validationPattern) {
        this.form.get(response.responseId)?.setValidators(Validators.pattern(response.validationPattern));
      }

The issue I am facing is that when there is an Even number of characters in this text field it is showing invalid no matter what. And when there is an Odd number of characters in the text field it seems to be working as expected. I have vetted out the regex and I don't believe that is the issue. Attached are some screenshots of the issue

Invalid State UI

Invalid State Back End

Valid State UI

Valid State Back End

I have tried

  • alternate regex patterns
  • regex as a string instead of as a RegEx type
  • applying the regex directly instead of storing in a variable
Chris Barr
  • 29,851
  • 23
  • 95
  • 135
ChungWu
  • 39
  • 5
  • 1
    Your regex pattern at least can be fixed: [`^(?:\d{1,3}(?:,\d{3})*|\d+)(?:\.\d{2})?$`](https://regex101.com/r/4XhuFp/1) further do you really need the `m` (multiline) and the `g` (global) flag for validation? Try without those. – bobble bubble Jul 12 '23 at 19:50
  • 1
    Thank you! it turns out it was the `m`. You are right, I didn't need it and it was more of a remnant of somewhere else in my code. I am surprised it caused this behavior none-the-less. However, thank you so much, this was driving me crazy! – ChungWu Jul 12 '23 at 20:36
  • Happy that helped you're welcome! – bobble bubble Jul 12 '23 at 20:41
  • Pretty sure the multi-line property has nothing to do with it. https://regex101.com/r/qMPGpI/1 . However if your text box has the multi-line property in creation it will accept the newline char. If you've given the regex the global property, the validation might pertain to only the last match. I would check these conflicts before claiming that this or that fixed it. Also your regex matches `11,111p66` https://regex101.com/r/1f681u/1 – sln Jul 12 '23 at 21:49

1 Answers1

0

bobble bubble was able to solve this for me. The issue was the addition of the m (multiline) at the end of my regex. removing it solved the issue.

ChungWu
  • 39
  • 5