i need 1 example validations on dynamic added fields. here 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 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>
you can add fonction controller :
app.controller('myctrl', function($scope) { //... $scope.validationfn = function () { //do validation here }; then need modify
<form name="form" class="form-horizontal" ng-submit="validationfn()"> 
Comments
Post a Comment