angularJS: ng-pattern for multiple matches of pattern

Question

It seems like a common way to validate values that are comma-separated is to split them into an array, then perform the regEx match on each member. However, I would like to take advantage of Angular's instant validation and perform this match in the view.

My regEx:

^\d{5}?,*$

works perfectly on the first match, but I'm at a loss as to how to ask it to check for this pattern n-times.

Form Code:

        <form id="zipCodeForm" name="zipCodeForm"  ng-submit="submit()" >
            <input id="zipCodeInput" ng-model="text" name="text" type="text"
            required ng-pattern="/^\d{5}?,*$/" > </input>

            <input id="zipSubmit" type="submit" value="Submit" class="btn btn-large btn-primary"></input>
            <div class="alert alert-info formatguide" ng-show="zipCodeForm.text.$dirty && zipCodeForm.text.$invalid">
               Enter Comma Separated 5-Digit Zip Codes ex.(11111,22222,33333)
            </div>
        </form>

Just a heads up. This \d{5}? syntax does not mean optionally find 5 digits, it means find 5 digits. This ,* means optionally find multiple consecutive commas. — user557597
– user557597, Commented Dec 26, 2013 at 18:23
@sln Correct, and that actually is the validation I want in this point, Angular handles a blank submission with the "required" attribute on the form, and the 5 digits is not optional. — Thomas Murphy
– Thomas Murphy, Commented Dec 26, 2013 at 19:18

score 3 · Accepted Answer · 2013-12-26 19:38:07Z

3

If you don't know how many zip codes, but want at least one, then this
^\d{5}(?:,\d{5})*$

If you know how many, use this
^\d{5}(?:,\d{5}){how many - 1}$

EDIT - The two regexes explained.

 ^                    # Begining of string
 \d{5}                # followed by 5 digits
 (?:                  # Cluster group
      ,                    # a literal comma
      \d{5}                # followed by 5 digits
 )*                   # End Cluster group, optionally do many times
 $                    # End of string

 # ---------------------------------------------------------

 ^                    # Begining of string
 \d{5}                # followed by 5 digits
 (?:                  # Cluster group
      ,                    # a literal comma
      \d{5}                # followed by 5 digits
 ){3}                 # End Cluster group, do exactly 3 times
 $                    # End of string

edited Dec 26, 2013 at 19:38

answered Dec 26, 2013 at 18:02

user557597

Sign up to request clarification or add additional context in comments.

4 Comments

Thomas Murphy Over a year ago

Is using the (), non-remembering match syntax standard form for checking regEx against n-number of matches? I've never encountered this particular need before.

user557597 Over a year ago

@Thomas Murphy - Added regex explaination. I don't know angularjs, I'm assuming the regex matches a data string, and does not have a tertiary matching with a form template to the data.

Thomas Murphy Over a year ago

Great expansion, the cluster group makes things a lot more clear.

user557597 Over a year ago

@Thomas Murphy - Thanks. I use RegexFomat4 from (here). With just a button click, it goes back and forth from expanssion to compressed. Makes maintainance a breeze.

Collectives™ on Stack Overflow

angularJS: ng-pattern for multiple matches of pattern

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related