lundi 9 mars 2015

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!


Aucun commentaire:

Enregistrer un commentaire