Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to use Angular form validation on dynamically created elements

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 916
    Comment on it

    In the example given below, I have used ng -repeat for dynamically creating input boxes. I have also used ng-form directive that allows the nesting of forms that can also be used for partial validation .

    <form name="mainForm" ng-submit="submitAll()">
      <ul>        
            <!-- We add ng-form to the tag ng-repeat is on,
                   to create a nested form context. -->
     <li ng-repeat="item in items" ng-form="subForm">
       <input type="text" required name="name" ng-model="item.name"/>
    
              <!-- now we can reference the validated field by name -->
              <span ng-show="subForm.name.$error.required">required</span>
    
              <!-- the nested form context itself can also be checked for validity. -->
              <button type="button" ng-disabled="subForm.$invalid" 
                         ng-click="submitOne(item)">Submit One</button>
     </li>
      </ul>
    
      <!-- last, but not least, the validation from our 
             subform bubbles up to our main form! -->
      <button type="submit" ng-disabled="mainForm.$invalid">Submit All</button>
    </form>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: