CODEWITHSUNDEEP
regexangularjsvalidation
DjayCi
DjayCi

Reputation: 81

Angular: ng-pattern validation being overriden by min/maxlength

Not sure if I'm missing something or if this is an actual bug. I'm running angular 1.2.9 (We still support IE8) and I'm building a form that is dynamically generated by an object.

<input ng-maxlength="{{data.MaxLength}}"
           ng-minlength="{{data.MinLength}}"
           ng-required="data.Required"
           ng-pattern="/[a-zA-ZàáâäãåèéêëìíîïòóôöõøùúûüÿýñçčšžÀÁÂÄÃÅÈÉÊËÌÍÎÏÒÓÔÖÕØÙÚÛÜŸÝÑßÇŒÆČŠŽ∂ð \-']+/"
           ng-switch-when="input"
           type="{{data.Type}}"
           ng-model="formData[data.Name]" 
           name="{{data.Name}}" />

<p ng-if="form[data.Name].$error.pattern">
        {{data.PatternValidationMessage}}
    </p>
    <p ng-if="form[data.Name].$error.maxlength || form[data.Name].$error.minlength">
        {{data.LengthValidationMessage}}
    </p>
    <p ng-if="form[data.Name].$error.required">
        {{data.RequiredValidatorMessage}}
    </p>

So, I'm expecting to show a message if the pattern doesn't match, if the field is not filled and if the input doesn't match a min or max criteria.

The problem:

If I just type "@[]" it triggers the pattern validation message, but if I type "@[][]abc" it cleans all the error messages, and adds a class of ng-valid-pattern(and it is obviously invalid).

Its like it only matches one at a time, or that it thinks that the pattern is valid when the input has "abc".

Any help will be appreciated!

Upvotes: 0

Views: 1773

Answers (1)

racraman
racraman

Reputation: 5034

You hit the nail on the head with "it thinks that the pattern is valid when the input has abc."

You need to add "^" to the start and "$" to the end of your pattern, so :

"/^[a-zA-Z.......]$/"

to makes the pattern match from the start to the end of input string, otherwise any input string that contains the pattern will match.

Upvotes: 1

Related Questions