Angularjs dynamic ng-pattern validation

Question

I have a form that if a checkbox is false enforces validation on a text input using the ng-required directive   If the checkbox is true  the field is hidden and the ng-required is set to false   The problem is that I also have a regex for validation specified on the input as well utilizing the ng-pattern angular directive   The issue I am running into is that if a user fills in an invalid phone number  checks the box to deactivate that input  and consequently needs no further validation  the form will not allow submission as it is invalid based on the ng-pattern   I attempted to resolve this issue by adding an ng-change function to set the input model to null  however the ng-pattern and thus the field is still set to invalid on the initial set of the checkbox to false   If I however uncheck the box  setting everything back to initial form load  then check the box again  the form is valid and able to submit   I am not sure what I am missing   Here is the ng-change code I have thus far       var phoneNumberRegex          d 3        -    d 3     -    d 4           scope phoneNumberPattern   phoneNumberRegex       scope removeValidation   function             if   scope cell  newUser     false                 scope request  number                    scope phoneNumberPattern     0-9a-zA-Z               else                scope phoneNumberPattern   phoneNumberRegex

User · Accepted Answer

This is an interesting problem  complex Angular validation  The following fiddle implements what you want   http   jsfiddle net 2G8gA 1   Details  I created a new directive  rpattern  that is a mix of Angular s ng-required and the ng-pattern code from input type text   What it does is watch the required attribute of the field and take that into account when validating with regexp  i e  if not required mark field as valid-pattern   Notes   Most of the code is from Angular  tailored to the needs of this  When the checkbox is checked  the field is required  The field is not hidden when the required checkbox is false  The regular expression is simplified for the demo  valid is 3 digits       A dirty  but smaller  solution  if you do not want a new directive  would be something like    scope phoneNumberPattern    function         var regexp          d 3        -    d 3     -    d 4          return           test  function value                if   scope requireTel     false                     return true                            return regexp test value                            And in HTML no changes would be required    lt input type  text  ng-model       ng-required  requireTel      ng-pattern  phoneNumberPattern    gt    This actually tricks angular into calling our test   method  instead of RegExp test    that takes the required into account

User · Answer

I just ran into this the other day   What I did  which seems easier than the above  is to set the pattern on a variable on the scope and refer to it in ng-pattern in the view    When  the checkbox is unchecked  I simply set the regex value to      on the onChanged callback  if going to unchecked   ng-pattern picks that change up and says  OK  your value is fine   Form is now valid   I would also remove the bad data from the field so you don t have an apparent bad phone   sitting there   I had additional issues around ng-required  and did the same thing  Worked like a charm

User · Answer

x000D   x000D    lt script src  https   ajax googleapis com ajax libs angularjs 1 0 6 angular js  gt  lt  script gt  x000D   lt input type  number  require ng-pattern     d 0 9     d 1 9       gt  lt input type  submit  gt  x000D   x000D   x000D

User · Answer

Not taking anything away from Nikos  awesome answer  perhaps you can do this more simply    lt form name  telForm  gt     lt input name  cb  type  checkbox  data-ng-modal  requireTel  gt     lt input name  tel  type  text  ng-model       ng-if  requireTel  ng-pattern  phoneNumberPattern  required  gt     lt button type  submit  ng-disabled  telForm  invalid    telForm  pristine  gt Submit lt  button gt   lt  form gt    Pay attention to the second input  We can use an ng-if to control rendering and validation in forms  If the requireTel variable is unset  the second input would not only be hidden  but not rendered at all  thus the form will pass validation and the button will become enabled  and you ll get what you need

User · Answer

Used pattern      ng-pattern     d 0 9     d 1 9         Used reference file      lt script src  https   ajax googleapis com ajax libs angularjs 1 0 6 angular js  gt  lt  script gt     Example for Input     lt input type  number  require ng-pattern     d 0 9     d 1 9       gt  lt input type  submit  gt

User · Answer

You can use site https   regex101 com  for building your own specific pattern for some country   For example  Poland   -pattern   xxxxxxxxx OR xxx-xxx-xxx OR xxx xxx xxx  -regexp     d 9    d 3 - d 3 - d 3    d 3  s d 3  s d 3

User · Answer

Sets pattern validation error key if the ngModel  viewValue does not match a RegExp found by evaluating the Angular expression given in the attribute value  If the expression evaluates to a RegExp object  then this is used directly  If the expression evaluates to a string  then it will be converted to a RegExp after wrapping it in   and   characters    It seems that a most voted answer in this question should be updated  because when i try it  it does not apply test function and validation not working   Example from Angular docs works good for me   Modifying built-in validators  html   lt form name  form  class  css-form  novalidate gt     lt div gt     Overwritten Email      lt input type  email  ng-model  myEmail  overwrite-email name  overwrittenEmail    gt      lt span ng-show  form overwrittenEmail  error email  gt This email format is invalid  lt  span gt  lt br gt     Model    myEmail      lt  div gt   lt  form gt    js  var app   angular module  form-example-modify-validators         app directive  overwriteEmail   function         var EMAIL REGEXP      a-z0-9     amp               -   example  com  i       return           require   ngModel           restrict              link  function scope  elm  attrs  ctrl                   only apply the validator if ngModel is present and Angular has added the email validator             if  ctrl  amp  amp  ctrl  validators email                        this will overwrite the default Angular email validator                 ctrl  validators email   function modelValue                        return ctrl  isEmpty modelValue     EMAIL REGEXP test modelValue                                                               Plunker

[angularjs] Angularjs dynamic ng-pattern validation

Details

Notes

Examples related to angularjs

Examples related to angularjs-directive

Examples related to angularjs-ng-change