B G Nithin Malathesh B G Nithin Malathesh - 1 month ago 6
AngularJS Question

AngularJS Validations for multiple fields

I need one example for validations on dynamic added fields. Here is my page.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js">
</script>
<title>Add Remove in AngularJS</title>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.deleted = [];
$scope.inputs = [];
$scope.addRow = function(){
$scope.inputs.push({name:'', age:''});
};
$scope.removeRow = function(index, input){
// alert(index);
// alert(input);
$scope.deleted.push(input);
$scope.inputs.splice(index,1);
};

});
</script>
</head>

<body style="background-color: gray; margin-top: 10px; ">
<center>
<div class="row" ng-app="myApp" ng-controller="myCtrl">
<div class="col-md-6">
<div class="panel panel-flat">
<div class="panel-header">
<h4>
Person Address
<button ng-click="addRow()">Add</button>
</h4>
</div>
<div class="panel-body">
<form name="form" class="form-horizontal">
<div ng-repeat="input in inputs">
<div class="form-group" ng-class="{'has-error' : form.name.$invalid}">
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="input.name" name="name[$index]" ng-maxlength="45" ng-minlength="3"
class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
<span class="help-block" ng-show="form.name[$index].$error.pattern">Alphabet only</span>
<span class="help-block" ng-show="form.name[$index].$error.minlength">Too Short</span>
<span class="help-block" ng-show="form.name[$index].$error.maxlength">Too Long</span>
<span class="help-block" ng-show="form.name[$index].$error.required">required</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<input type="text" ng-model="input.age" name="age"
class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
<span ng-show="form.age.$invalid && form.age.$error.pattern">Number
length should be 3</span>
</div>
</div>

<button ng-click="removeRow($index, input)">Remove</button>
<hr>
</div>
</form>
</div>
</div>
</div>
<!-- inputs :{{inputs}}<br>deleted : {{deleted}} -->
</div>
</center>
</body>

</html>

Answer

Here is the answer:

 <div class="panel-body"><form name="form" class="form-horizontal">
 <div ng-repeat="input in inputs"><ng-form name="sfIn"><div class="form-group" >
                                <label class="col-md-2 control-label">Name</label>
                                <div class="col-md-10">
                                    <input type="text" ng-model="input.name" name="name"  ng-maxlength="45" ng-minlength="3"
                                        class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
                                    <span
                                    class="help-block" ng-show="sfIn.name.$error.pattern">Alphabet only</span>
                                    <span 
                                    class="help-block" ng-show="sfIn.name.$error.minlength">Too Short</span>
                                    <span 
                                    class="help-block" ng-show="sfIn.name.$error.maxlength">Too Long</span>
                                    <span 
                                    class="help-block" ng-show="sfIn.name.$touched.required || sfIn.name.$error.required ||
                                    sfIn.name.$dirty.required">required</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Age</label>
                                <div class="col-md-10">
                                    <input type="text" ng-model="input.age" name="age"
                                        class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
                                    <span 
                                    ng-show="sfIn.age.$error.pattern">Number
                                        length should be 3</span>
                                </div>
                            </div>

                            <button 
                            ng-click="removeRow($index, input)">Remove</button>
                            </ng-form>
                            <hr>
                        </div>
                    </form>
                </div>
Comments