How to Validate Inputs Dynamically Created Using Ng-Repeat, Ng-Show (Angular)

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

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):

<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>
      </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/

How to dynamically validation under ng-repeat in angularjs

Use ng-required:

<div ng-repeat="vitem in vm.inputValidates">
    <input name={{vitem.name}} ng-model="vm.useraccount[vitem.name]" ng-required="item.validate">
</div>

By the way, I see you assigned inputValidates to your $scope. So you should be accessing it in your view by inputValidates, not vm.inputValidates.

form validation- validate inputs dynamically created by ng-repeat

You can do this:

<tr ng-repeat="answer in answers track by $index" ng-form="subQuestionForm">
    <td>
       <div>
        <input name="ansText" id="ansText" type='text' ng-model="answer.ansText" class="form-control" ng-required="$index == 0 || $index == 1 " />
            </div>    
    </td>
</tr>

AngularJS form validation on dynamically generated input directives not working with ngForm

The solution for this issue is apparently in the works, and has been an issue for 2+ years. Add your vote to it on GitHub! The easiest solution to implement and arguably the best solution can be found here with credit to Thinkscape, and I've copied it below.

  angular.module('interpol', [])

  .config(function($provide) {

    $provide.decorator('ngModelDirective', function($delegate) {
      var ngModel = $delegate[0], controller = ngModel.controller;
      ngModel.controller = ['$scope', '$element', '$attrs', '$injector', function(scope, element, attrs, $injector) {
        var $interpolate = $injector.get('$interpolate');
        attrs.$set('name', $interpolate(attrs.name || '')(scope));
        $injector.invoke(controller, this, {
          '$scope': scope,
          '$element': element,
          '$attrs': attrs
        });
      }];
      return $delegate;
    });

    $provide.decorator('formDirective', function($delegate) {
      var form = $delegate[0], controller = form.controller;
      form.controller = ['$scope', '$element', '$attrs', '$injector', function(scope, element, attrs, $injector) {
        var $interpolate = $injector.get('$interpolate');
        attrs.$set('name', $interpolate(attrs.name || attrs.ngForm || '')(scope));
        $injector.invoke(controller, this, {
          '$scope': scope,
          '$element': element,
          '$attrs': attrs
        });
      }];
      return $delegate;
    });
  })

  .run(function($rootScope) {
    $rootScope.models = [{
      value: 'foo'
    },{
      value: 'bar'
    },{
      value: 'baz'
    }];
});

I just dropped it in, marked it as a dependency, and the form in my question works.

Cheers

---

Related Topics