如何验证动态生成的文本框？

Question

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?

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

Answer 2

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> 

Answer 3

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