0

I am developing a web application in AngularJS. I am generating some textboxes dynamically. I want to do validation for each of the generated textboxes.

Below is my html where I am generating textboxes.

<div ng-repeat="text in Textboxes">
    <input class="with-icon" type="text" name="{{text.name}}" required value="{{text.value}}"/>
</div>

Below is my JS code.

$scope.Textboxes = [{ name: 'name1', value: 'value1' }, { name: 'name2', value: 'value2' }];

Whenever I click on submit button if I did not enter anything in text boxes then I want to make textboxes red.

Can it be done for dynamically generated textboxes?

Erazihel
  • 7,295
  • 6
  • 30
  • 53
Niranjan Godbole
  • 2,135
  • 7
  • 43
  • 90

3 Answers3

1
  1. Use ng-model instead of value
  2. use a ng-class or ng-style to conditionally (hence check with the text.value) add some style to make it red
  3. use $invalid in the form to check whether all text field are validated with text entry or not, apply something (may be disabled) to submit button look and feel or in click event (prevent the action according to $invalid in the form)
Koushik Chatterjee
  • 4,106
  • 3
  • 18
  • 32
1

use form to validate the submit

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.Textboxes = [{ name: 'name1', value: 'value1' }, { name: 'name2', value: 'value2' }]

})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<form name="loginform">
 <div ng-repeat="text in Textboxes">
    <input class="with-icon" type="text" name="{{text.name}}" required value="{{text.value}}"/>
</div>
<button type="submit" >Login</button>

</form>

</div>
Sachila Ranawaka
  • 39,756
  • 7
  • 56
  • 80
  • Thank you. I have developed plunker. I am looking for angular validation where i can make my input control red on form submit. https://plnkr.co/edit/B9H8wpNhBCVsH10fb1Tc?p=preview – Niranjan Godbole Jul 20 '17 at 09:24
0

Use ng-model to bind the values and then ng-class to set/remove error class that changes the border to red/black

I think This is what you're looking for

Plunkr

tritims
  • 52
  • 1
  • 6