CODEWITHSUNDEEP
htmlangularjs
Alex Lavriv
Alex Lavriv

Reputation: 321

Angular dynamic fields validation

I am learnig angular and I am trying to implement the following behavior using vanilla angular.

I have the following html page that creates dynamically text inputs and a button.

By pressing on the button I want to validate all the inputs (only to check if they are not empty) and show the message under the invalid input. It is very easy to implement with jQuery or even with plain JS, But I am struggling with angular.

jsFiddle - https://jsfiddle.net/AlexLavriv/zkdodm4b/1/

(function(angular) {
  'use strict';
angular.module('scopeExample', [])
  .controller('MyController', ['$scope', function($scope) {
    $scope.instances = [1,2,3,4,5,6,7,8,9,10];
$scope.clicked = function()
{
    alert("clicked");
};


  }]);
})(window.angular);



    <body ng-app="scopeExample">
      <div ng-controller="MyController">
     <div ng-repeat="instance in instances">
    <form name="instance{{$index}}">
    <input type="text" required="true" ng-model="txt" name="txt">
    <div ng-show="instance{{$index}}.txt.$invalid && instance{{$index}}.txt.$touched"> the input is illegal</div>

    </form>
    </div>
    <input type="button" value="Press"  ng-click="clicked()">


</div>
</body>

Upvotes: 0

Views: 89

Answers (2)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27242

Some observations as per current code :

  • As we are repeating only form element <input>. so, put ng-repeat below<form> instead of outside.
  • <input type="submit" value="Press" ng-click="submitted = true"> should comes under the form element.
  • use <input name="txt{{$index}}".. instead of <form name="instance{{$index}}"...

DEMO

var app = angular.module('scopeExample', []);
app.controller('MyController', ['$scope', function($scope) {
    $scope.instances = [1,2,3,4,5];
    $scope.clicked = function() {
      alert("clicked");
    };
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="scopeExample" ng-controller="MyController">
<form name="myForm" ng-submit="myForm.$valid && clicked()" novalidate>
<div ng-repeat="instance in instances">
<input type="text" required="true" ng-model="txt" name="txt{{$index}}">
<div ng-show="submitted == true && myForm.txt{{$index}}.$error.required"> the input is illegal</div>
</div>
<input type="submit" value="Press"  ng-click="submitted = true">
</form>
</div>

Upvotes: 0

Tim Harker
Tim Harker

Reputation: 2417

This should give you what you're looking for (just a few tweaks):

(function(angular) {
  'use strict';
  angular.module('scopeExample', [])
    .controller('MyController', ['$scope', function($scope) {
      $scope.instances = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
      $scope.clicked = function() {
        angular.forEach($scope.instances, function(instance) {
          $scope.outerForm[instance].txt.$setTouched();
        });
      };
    }]);
})(window.angular);
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<body ng-app="scopeExample">
  <div ng-controller="MyController">
    <form name="outerForm">
      <div ng-repeat="instance in instances">
        <ng-form name="{{instance}}">
          <input type="text" required="true" ng-model="txt" name="txt">
          <div ng-show="{{instance}}.txt.$error.required && {{instance}}.txt.$touched"> the input is illegal</div>
        </ng-form>
      </div>
      <input type="button" value="Press" ng-click="clicked()">
    </form>
  </div>
</body>

Let me know if you have any further questions.

Upvotes: 1

Related Questions