CODEWITHSUNDEEP
angularjsformsvalidationdynamic
Usman Iqbal
Usman Iqbal

Reputation: 2429

Angular Js - Why the validation on dynamic field is not working?

Hi I am creating dynamic fields and applying validation. But for some reason Its not working. I rub the data in the fields I enter long characters, but the validation does not work.

<div data-ng-repeat="variant in variants" class="col-md-12 col-sm-12 col-xs-12 form-group">
  <label for="text">{{variant.name}}:</label>
  <p ng-show="addproductForm.variant_value.$invalid && !addproductForm.variant_value.$pristine"
     class="help-block color-ferozimp">
    Choose {{variant_name}} please
  </p>
  <input type="text"
     name="variant_value"
     class="form-control"
     ng-model="variant.variant_value"
     placeholder="Enter {{variant.name}}"
     ng-minlength="2"
     ng-maxlength="30"
     required>
</div>

Upvotes: 0

Views: 633

Answers (2)

lenilsondc
lenilsondc

Reputation: 9800

The problem is that the fields must have consistent unique names, in your case, all of them have the same name variant_value. Therefore, the dynamic fields can be named according to its position on the list, for example:

name="variant_value{{$index}}"

This way you can seek for the field and the validation state using that unique name:

<span ng-show="addproductForm['variant_value'+$index].$invalid && !addproductForm['variant_value'+$index].$pristine">
    //my message
</span>

Also, AngularJs validation sistem requires ngForm directive.

<form name="addproductForm" novalidate>
</form>

The bellow snippet is a working version of your code.

angular.module('myApp', [])
  .controller('myController', function ($scope) {
    $scope.variants = [
      { name: 'variant1', variant_value: "1" },
      { name: 'variant2', variant_value: "" },
      { name: 'variant3', variant_value: "" },
      { name: 'variant4', variant_value: "" },
      { name: 'variant5', variant_value: "" },
    ];
  });

angular.element(document).ready(function () {
  angular.bootstrap(document, ['myApp']);
});
.help-block{
  display:inline-block;
}
.color-ferozimp{
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<div ng-controller="myController">
  <form name="addproductForm" novalidate>
  <div data-ng-repeat="variant in variants" class="col-md-12 col-sm-12 col-xs-12 form-group">
  <label for="text">{{variant.name}}:</label>
  <input type="text"
     name="variant_value{{$index}}"
     class="form-control"
     ng-model="variant.variant_value"
     placeholder="Enter {{variant.name}}"
     ng-minlength="2"
     ng-maxlength="30"
     required>
  <span ng-show="addproductForm['variant_value'+$index].$invalid && !addproductForm['variant_value'+$index].$pristine"
     class="help-block color-ferozimp">
    Choose {{variant_name}} please
  </span>
  </div>
  </form>
</div>

Upvotes: 1

user1612183
user1612183

Reputation: 21

You are naming each of your dynamic fields with the same value "variant_value".

I would give them their own names using the $index property of ng-repeat.

<form name="addproductForm">
<div data-ng-repeat="variant in variants">
  <label for="text">{{variant.name}}:</label>
  <p ng-show="addproductForm[{{$index}}].$invalid && !addproductForm[{{$index}}].$pristine">Choose {{variant_name}} please</p>
  <input type="text" name="{{$index}}" class="form-control" ng-model="variant.variant_value" placeholder="Enter {{variant.name}}" ng-minlength="2" ng-maxlength="30" required>
</div>
</form>

See this plunkr.

https://plnkr.co/edit/dXCjGJDwudGdKFrxHg5n?p=preview

Upvotes: 0

Related Questions