How to validate inputs dynamically created using ng-repeat ng-show angular

Question

I have a table that is created using ng-repeat  I want to add validation to each element in the table  The problem is that each input cell has the same name as the cell above and below it  I attempted to use the    index   value to name the inputs  but despite the string literals in HTML appearing correct  it is now working   Here is my code as of now    lt tr ng-repeat  r in model BSM   gt      lt td gt         lt input ng-model  r QTY  class  span1  name  QTY   index    ng-pattern      d       d      required  gt         lt span class  alert-error  ng-show  form QTY   index    error pattern  gt  lt strong gt Requires a number  lt  strong gt  lt  span gt         lt span class  alert-error  ng-show  form QTY   index    error required  gt  lt strong gt  Required lt  strong gt  lt  span gt      lt  td gt   lt  tr gt    I have tried removing the      from index  but that does not work either  As of now  the validation property of the input is working correctly  but the error message is not displayed   Anyone have any suggestions   Edit  In addition to the great answers below  here is a blog article that covers this issue in more detail  http   www thebhwgroup com blog 2014 08 angularjs-html-form-design-part-2

User · Answer

If your using ng-repeat  index works like this      name  QTY   index      and      lt td gt          lt input ng-model  r QTY  class  span1  name  QTY   index    ng-                     pattern      d       d      required  gt           lt span class  alert-error  ng-show  form  QTY     index   error pattern  gt           lt strong gt Requires a number  lt  strong gt  lt  span gt           lt span class  alert-error  ng-show  form  QTY     index   error required  gt          lt strong gt  Required lt  strong gt  lt  span gt       lt  td gt    we have to show the ng-show in ng-pattern      lt span class  alert-error  ng-show  form  QTY     index   error pattern  gt      lt span class  alert-error  ng-show  form  QTY     index   error required  gt

User · Answer

Here an example of how I do that  I don t know if it is the best solution  but works perfectly   First  code in HTML  Look at ng-class  it s calling hasError function  Look also to the input s name declaration  I use the  index to create different input names    lt div data-ng-repeat  tipo in currentObject Tipo      ng-class    has-error   hasError planForm   TipoM    required    index     hasError planForm   TipoM    maxlength    index    gt       lt input ng-model  tipo Nombre  maxlength  100  required         name     TipoM     index     gt    And now  here is the hasError function    scope hasError   function  form  elementName  errorType  index               if  form    undefined                   elementName    undefined                   errorType    undefined                   index    undefined                 return false              var element   form elementName   index              return  element    null  amp  amp  element  error errorType   amp  amp  element  touched

User · Answer

validation is working with ng repeat if I use the following syntax scope step3Form  item 107  quantity     touched I don t know it s a best practice or the best solution  but it works   lt tr ng-repeat  item in items  gt      lt td gt           lt div class  form-group  gt               lt input type  text  ng-model  item quantity  name  item  lt   item id  gt   quantity   required    class  form-control  placeholder      of Units    gt               lt span ng-show  step3Form  submitted    step3Form  item  lt   item id   gt   quantity     touched  gt                   lt span class  help-block  ng-show  step3Form  item  lt   item id   gt   quantity     error required  gt    of Units is required  lt  span gt               lt  span gt           lt  div gt       lt  td gt   lt  tr gt

User · Answer

Since the question was asked the Angular team has solved this issue by making it possible to dynamically create input names    With Angular version 1 3 and later you can now do this    lt form name  vm myForm  novalidate gt     lt div ng-repeat  p in vm persons  gt       lt input type  text  name  person    index    ng-model  p  required gt       lt span ng-show  vm myForm  person      index   invalid  gt Enter a name lt  span gt     lt  div gt   lt  form gt    Demo  Angular 1 3 also introduced ngMessages  a more powerful tool for form validation  You can use the same technique with ngMessages    lt form name  vm myFormNgMsg  novalidate gt       lt div ng-repeat  p in vm persons  gt         lt input type  text  name  person    index    ng-model  p  required gt         lt span ng-messages  vm myFormNgMsg  person      index   error  gt           lt span ng-message  required  gt Enter a name lt  span gt         lt  span gt       lt  div gt     lt  form gt

User · Answer

If you don t want to use ng-form you can use a custom directive that will change the form s name attribute  Place this directive as an attribute on the same element as your ng-model   If you re using other directives in conjunction  be careful that they don t have the  terminal  property set otherwise this function won t be able to run  given that it has a priority of -1    For example  when using this directive with ng-options  you must run this one line monkeypatch  https   github com AlJohri bower-angular commit eb17a967b7973eb7fc1124b024aa8b3ca540a155  angular module  app   directive  fieldNameHack   function         return         restrict   A         priority  -1        require    ngModel             the ngModelDirective has a priority of 0           priority is run in reverse order for postLink functions        link  function  scope  iElement  iAttrs  ctrls             var name   iElement 0  name          name   name replace        index     g  scope  index            var modelCtrl   ctrls 0           modelCtrl  name   name                        I often find it useful to use ng-init to set the  index to a variable name  For example    lt fieldset class  inputs  ng-repeat  question questions  ng-init  qIndex    index  gt    This changes your regular expression to   name   name replace      qIndex     g  scope qIndex     If you have multiple nested ng-repeats  you can now use these variable names instead of  parent  index   Definition of  terminal  and  priority  for directives  https   docs angularjs org api ng service  compile directive-definition-object  Github Comment regarding need for ng-option monkeypatch  https   github com angular angular js commit 9ee2cdff44e7d496774b340de816344126c457b3 commitcomment-6832095 https   twitter com aljohri status 482963541520314369  UPDATE   You can also make this work with ng-form   angular module  app   directive  formNameHack   function         return         restrict   A         priority  0        require    form          compile  function             return             pre  function scope  iElement  iAttrs  ctrls                var parentForm     iElement  parent   controller  form                if  parentForm                    var formCtrl   ctrls 0                   delete parentForm formCtrl  name                   formCtrl  name   formCtrl  name replace        index     g  scope  index                   parentForm formCtrl  name    formCtrl

User · Answer

Added more complex example with  custom validation  on the side of controller http   jsfiddle net 82PX4 3    lt div class  line  ng-repeat  line in ranges  ng-form  lineForm  gt      low   lt input type  text                   name  low                  ng-pattern     d                      ng-change  lowChanged this   index   ng-model  line low    gt      up   lt input type  text                   name  up                  ng-pattern     d                     ng-change  upChanged this   index                    ng-model  line up    gt       lt a href ng-if    first  ng-click  removeRange  index   gt Delete lt  a gt       lt div class  error  ng-show  lineForm  error pattern  gt          Must be a number       lt  div gt       lt div class  error  ng-show  lineForm  error range  gt          Low must be less the Up       lt  div gt   lt  div gt

User · Answer

Building on pkozlowski opensource s answer  I ve added a way to have dynamic input names that also work with ngMessages  Note the ng-init part on the ng-form element and the use of furryName  furryName becomes the variable name that contains the variable value for the input s name attribute    lt ion-item ng-repeat  animal in creatures track by  index  gt   lt ng-form name  animalsForm  ng-init  furryName    furry     index  gt           lt  -- animal is furry toggle buttons -- gt           lt input id  furryRadio   index                   type  radio                 name    furryName                   ng-model  animal isFurry                 ng-value  radioBoolValues boolTrue                 required                  gt           lt label for  furryRadio   index    gt Furry lt  label gt            lt input id  hairlessRadio   index                   name    furryName                   type  radio                 ng-model  animal isFurry                 ng-value  radioBoolValues boolFalse                 required                 gt           lt label for  hairlessRadio   index    gt Hairless lt  label gt            lt div ng-messages  animalsForm furryName   error               class  form-errors               ng-show  animalsForm furryName   invalid  amp  amp  sectionForm  submitted  gt               lt div ng-messages-include  client views partials form-errors ng html  gt  lt  div gt           lt  div gt   lt  ng-form gt   lt  ion-item gt

User · Answer

This will get the name in the ng-repeat to come up seperate in the form validation    lt td gt       lt input ng-model  r QTY  class  span1  name     QTY     index    ng-pattern      d       d      required  gt   lt  td gt    But I had trouble getting it to look up in its validation message so I had to use an ng-init to get it to resolve a variable as the object key    lt td gt       lt input ng-model  r QTY  class  span1  ng-init  name    QTY     index  name    name    ng-pattern      d       d      required  gt       lt span class  alert-error  ng-show  form name   error pattern  gt  lt strong gt Requires a number  lt  strong gt  lt  span gt       lt span class  alert-error  ng-show  form name   error required  gt  lt strong gt  Required lt  strong gt  lt  span gt

User · Answer

It is possible and here is how I do the same thing with a table of inputs   wrap the table in a form like so   Then just use this  I have a form with multi-nested directives that all contain input s   select s   etc    These elements are all enclosed in ng-repeats  and dynamic string values   This is how to use the directive    lt form name  myFormName  gt     lt nested directives of many levels gt       lt your table here gt       lt perhaps a td here gt      ex   lt input ng-repeat  index  variable  in variables  type  text                 my-name     variable name          myFormName                     ng-model  variable name  required   gt      ex   lt select ng-model  variable name  ng-options  label in label in    variable options                     my-name     variable name   index          myFormName               lt  select gt   lt  form gt    Note  you can add and index to the string concatenation if you need to serialize perhaps a table of inputs  which is what I did   app directive  myName   function       var myNameError    myName directive error       return       restrict  A      Declares an Attributes Directive      require   ngModel      ngModelController       link  function  scope  elem  attrs  ngModel          if   ngModel    return      no ngModel exists for this element           check myName input for proper formatting ex  something something       checkInputFormat attrs          var inputName   attrs myName match     w    pop       match upto           assignInputNameToInputModel inputName  ngModel          var formName   attrs myName match    w     pop       match after           findForm formName  ngModel  scope            end link        end return    function checkInputFormat attrs       if     w   w  test attrs rsName           throw myNameError    Formatting should be   inputName formName   but is     attrs rsName              function assignInputNameToInputModel inputName  ngModel       ngModel  name   inputName        function addInputNameToForm formName  ngModel  scope       scope formName  ngModel  name    ngModel  return        function findForm formName  ngModel  scope       if   scope       ran out of scope before finding scope formName        throw myNameError     lt Form gt  element named     formName     could not be found              if  formName in scope      found scope formName        addInputNameToForm formName  ngModel  scope        return           findForm formName  ngModel  scope  parent     recursively search through  parent scopes           This should handle many situations where you just don t know where the form will be   Or perhaps you have nested forms  but for some reason you want to attach this input name to two forms up   Well  just pass in the form name you want to attach the input name to   What I wanted  was a way to assign dynamic values to inputs that I will never know  and then just call  scope myFormName  valid   You can add anything else you wish  more tables more form inputs  nested forms  whatever you want   Just pass the form name you want to validate the inputs against   Then on form submit ask if the  scope yourFormName  valid

User · Answer

Looking over these solutions  the one provided by Al Johri above is the closest to my needs  but his directive was a little less programmable then I wanted  Here is my version of his solutions   angular module  app            directive  dynamicFormName   function             return               restrict   A               priority  0              require    form                compile  function                     return                       pre  function preLink scope  iElement  iAttrs  ctrls                            var name    field    scope  index                           if  iAttrs dnfnNameExpression                                name   scope  eval iAttrs dnfnNameExpression                                                      var parentForm   iElement parent   controller  form                            if  parentForm                                var formCtrl   ctrls 0                               delete parentForm formCtrl  name                               formCtrl  name   name                              parentForm formCtrl  name    formCtrl                                                                                                       This solution lets you just pass a name generator expression to the directive and avoids the lock down to pattern substitution he was using   I also had trouble initially with this solution since it didn t show an example of using it in markup  so here is how I used it    lt form name  theForm  gt       lt div ng-repeat  field in fields  gt           lt input type  number  ng-form name  theInput  field id    ng-model  field value  dynamic-form-name dnfn-name-expression   theInput    field id  gt               lt  div gt   lt  form gt    I have a more complete working example on github

User · Answer

AngularJS relies on input names to expose validation errors   Unfortunately  as of today  it is not possible  without using a custom directive  to dynamically generate a name of an input  Indeed  checking input docs we can see that the name attribute accepts a string only   To solve the  dynamic name  problem you need to create an inner form  see ng-form     lt div ng-repeat  social in formData socials  gt         lt ng-form name  urlForm  gt               lt input type  url  name  socialUrl  ng-model  social url  gt               lt span class  alert error  ng-show  urlForm socialUrl  error url  gt URL error lt  span gt         lt  ng-form gt     lt  div gt    The other alternative would be to write a custom directive for this   Here is the jsFiddle showing the usage of the ngForm  http   jsfiddle net pkozlowski opensource XK2ZT 2

User · Answer

Use the ng-form directive inside of the tag in which you are using the ng-repeat directive  You can then use the scope created by the ng-form directive to reference a generic name  For example        lt div class  form-group col-sm-6  data-ng-form  subForm  data-ng-repeat  field in justificationInfo justifications   gt            lt label for    field label    gt  lt h3 gt   field label   lt  h3 gt  lt  label gt           lt i class  icon-valid  data-ng-show  subForm input  dirty  amp  amp  subForm input  valid  gt  lt  i gt           lt i class  icon-invalid  data-ng-show  subForm input  dirty  amp  amp  subForm input  invalid  gt  lt  i gt           lt textarea placeholder    field placeholder    class  form-control  id    field label    name  input  type  text  rows  3  data-ng-model  field value  required gt   field value   lt  textarea gt        lt  div gt    Credit to  http   www benlesh com 2013 03 angular-js-validating-form-elements-in html

User · Answer

My requirements were a bit different than the ones asked on the original question  but hopefully I might help someone who is going through the same problem that I was     I had to define if a field was required or not based on a scope variable   So I basically had to set ng-required  myScopeVariable   which is a boolean variable     lt div class  align-left  ng-repeat  schema in schemas  gt       lt input type  text  ng-required  schema Required    gt   lt  div gt

User · Answer

It is too late but might be it can help anyone   Create unique name for every control Validate by using fromname uniquname   error   Sample code     lt input      ng-model  r QTY       class  span1       name  QTY   index         ng-pattern      d       d      required  gt   lt div ng-messages  formName  QTY    index   error       ng-show  formName  QTY    index   dirty    formName  submitted  gt      lt div ng-message  required  class  error  gt Required lt  div gt      lt div ng-message  pattern  class  error  gt Invalid Pattern lt  div gt   lt  div gt    See working demo here

[javascript] How to validate inputs dynamically created using ng-repeat, ng-show (angular)

Examples related to javascript

Examples related to html

Examples related to angularjs

Examples related to validation

Examples related to grid