Dynamic form name attribute in Angularjs

by

Looks like Angular 1.3 fixed this (https://stackoverflow.com/a/32907176/3854385)

This is now possible with Angular 1.3+:

<form name="vm.myForm" novalidate>
  <div ng-repeat="p in vm.persons">
    <input type="text" name="person_{{$index}}" ng-model="p" required>
    <span ng-show="vm.myForm['person_' + $index].$invalid">Enter a name</span>
  </div>
</form>

Demo

In some cases an inner form is a good solution if you can just pass the information: (https://stackoverflow.com/posts/12044600/)
To solve the ‘dynamic name’ problem you need to create an inner form (see ng-form):

<div ng-repeat="social in formData.socials">
      <ng-form name="urlForm">
            <input type="url" name="socialUrl" ng-model="social.url">
            <span class="alert error" ng-show="urlForm.socialUrl.$error.url">URL error</span>
            <button ng-click="doSomething(urlForm.socialUrl.$valid)">Test</button>
      </ng-form>
  </div>

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/

More Related Contents:

  1. Controller not a function, got undefined, while defining controllers globally
  2. Can an angular directive pass arguments to functions in expressions specified in the directive’s attributes?
  3. Confirmation dialog on ng-click – AngularJS
  4. Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3
  5. Way to ng-repeat defined number of times instead of repeating over array?
  6. How to set an iframe src attribute from a variable in AngularJS
  7. How to improve performance of ngRepeat over a huge dataset (angular.js)?
  8. AngularJS multiple filter with custom filter function
  9. AngularJS communication between directives
  10. orderBy multiple fields in Angular
  11. How to set the id attribute of a HTML element dynamically with angularjs (1.x)?
  12. AngularJS – Image “onload” event
  13. $watch an object
  14. ion-content and ion-footer have different $scope
  15. ngRepeat Filter by deep property
  16. AngularJS: ng-repeat list is not updated when a model element is spliced from the model array
  17. Angular JS: What is the need of the directive’s link function when we already had directive’s controller with scope?
  18. Resetting form after submit in Angularjs
  19. angular directive ignore non-numeric input
  20. ng-selected not working in select element
  21. AngularJS ng-repeat handle empty list case
  22. Directive is being rendered before promise is resolved
  23. Add ng-click dynamically in directive link function
  24. Genuinely stop a element from binding – unbind an element – AngularJS
  25. ng-click not working in dynamically created content
  26. AngularJS using $rootScope as a data store
  27. Sort or Rearrange Rows of a table in angularjs (drag and drop)
  28. Angular controller scope not updating after jQuery ajax call
  29. AngularJS event on window innerWidth size change
  30. How to generates dynamically ng-model=”my_{{$index}}” with ng-repeat in AngularJS?

Leave a Comment