0

I am trying to validate several inputs that are generated dynamically from a counter. The problem is that when calling function that validates that it's correct or not (with ui-validate) it seems that only took one value and applied it to all at once. I don't know what's happening, am I noob? How can I solve that?

Here is my html code:

<div ng-repeat="(index) in countIterator track by index" ng-model="countIterator">
  <div class="form-group col-sm-6" ng-class="{'has-error': !validProduct}" 
       title="Product{{index + 1}}">
    <label for="dataProduct{{index + 1}}" class="control-label required">Products</label>
    <input name="dataProduct{{index + 1}}" type="number" min="0"
           class="form-control" ng-model="data[index].product" required 
           ui-validate=" 'validators.validateProducts($value, index+1)' " />
    <div ng-show="!validProduct" class="error">there's an error</div> 
  </div>
</div>

And here is the code in my angularjs directive:

angular.module('app.pages.mypage')
.directive('productsDetails', function($compile) {
    return {
        scope: {
            dataProduct: '=ngModel',
            required: '=ngRequired'
        },
        templateUrl: 'app/pages/mypage/directives/products.html',
        replace: true,
        controller: function($scope, $rootScope, $http, url) {

            $scope.validators = {
              validateProducts: function(value, indexNumber) {
                $scope.validProduct = false;
                if((typeof value !== 'undefined') && (value !== '')) {
                  if (indexNumber === 1) {
                    $scope.validProduct = true
                  } if (indexNumber === 2) {
                    $scope.validProduct = true
                  } if (indexNumber === 3) {
                    $scope.validProduct = true
                  }
                  return $scope.validProduct;
                } 
                else {
                  if (indexNumber === 1) {
                    $scope.validProduct = false
                  } if (indexNumber === 2) {
                    $scope.validProduct = false
                  } if (indexNumber === 3) {
                    $scope.validProduct = false
                  }
                  return $scope.validProduct;
                }
              }
            };
        }
    }
georgeawg
  • 48,608
  • 13
  • 72
  • 95
Norak
  • 383
  • 2
  • 6
  • 14
  • The `ng-model` directive does not work with `
    ` elements.
    – georgeawg Mar 05 '20 at 16:44
  • It would be helpful if you edited the [ui-validate tag](https://stackoverflow.com/edit-tag-wiki/91621) to include a summary and link to the `ui-validate` documentation. – georgeawg Mar 05 '20 at 16:46

0 Answers0