pTutorial

New way to learn Programming

AngularJS dynamic form validation

AngularJS dynamic form validation with bootstrap

AngularJS dynamic form generation and validation: AngularJS dynamic form validation using each (JQUERY, use Angular. forEach at the place of each) and if else. Using the following code you can create form dynamically and validate. Number of field may be vary. In my case two text field are mandatory and other two are not mandatory.

HTML

<html>
<head>
<link href="http://freeonlinecompiler.ptutorial.com/
css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="http://www.ptutorial.com/angularjs/
angular.min.js" type="text/javascript"></script>
<link href="http://www.ptutorial.com/font-awesome-4.5.0/css/font-awesome.min.css"
media="screen" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="app-angularjs-dynamic-form-validation.js"></script>
</head> 
<body>
<div ng-app="customersupportapp">
<div ng-controller="customerCtrl" ng-cloak> 
<div class="clear"></div>
<div class="container-fluid main-content">
<div class="row form-list-row mrg-top clearfix">

<div class="col-xs-12 col-sm-12 col-md-8 no-rpad">
<div class="row com-marg">
<div class="col-xs-12 col-sm-12 col-md-12">
<h2>AngularJS Bootstarp dynamic form creation</h2>
<div class="alert alert-{{className}} fade in "ng-show="msgflag">{{msgString}}</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 com-marg form-group">
<h5><span style="color: red;"><sup>*</sup> </span>Customer Care Number</h5>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 ">
<input type="text" class="form-control" name="phone_text" ng-model="tempData.customer_care_number" placeholder="99999999">
</div>

</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 com-marg">
<h5>Sec. Customer Care Number</h5>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<input type="text" class="form-control" id="sec_phone" ng-model="tempData.sec_customer_care_number" name="secondary_phone_text" placeholder="9999999999">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 com-marg">
<h5><span style="color: red;"><sup>*</sup> </span>Email Address</h5>
<input type="text" class="form-control" name="email_text" ng-model="tempData.email_address" placeholder="abc@xyz.com">
</div>
<div class="col-xs-12 col-sm-6 col-md-6 com-marg">
<h5>From Email <span style="font-size: 11px;">(Will be used to send email)</span></h5>
<input type="text" class="form-control" name="from_email" ng-model="tempData.from_email_address" placeholder="abc@xyz.com">
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 com-marg">
<h2></h2>
</div>
</div>

</div>

<div class="full-width">
<div style="background: #f8f8f8" class="row" ng-repeat="(key,modeldat) in custservice">

<div class="col-xs-12 col-sm-12 col-md-12">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 com-marg">
<h2>Slab {{key + 1}}</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 com-marg">
<h5><span style="color: red;"><sup>*</sup> </span>Customer Care Number</h5>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
    <input class="form-control" type="text" name="phone_text" ng-model="modeldat.customer_care_number"  placeholder="99999999">
</div>

</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 com-marg">
<h5>Sec. Customer Care Number</h5>
<div class="row">

<div class="col-xs-12 col-sm-12 col-md-12">
    <input class="form-control" type="text" id="sec_phone" ng-model="modeldat.sec_customer_care_number" name="secondary_phone_text" placeholder="999999999">
</div>
</div>
</div>
</div>
<div class="row com-marg">
<div class="col-xs-12 col-sm-6 col-md-6 com-marg">
<h5><span style="color: red;"><sup>*</sup> </span>Email Address</h5>
<input class="form-control" type="text" name="email_text" title="Email address" ng-model="modeldat.email_address" placeholder="abc@xyz.com">
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<h5>From Email <span style="font-size: 11px;">(Will be used to send email)</span></h5>
<input class="form-control" type="text" name="from_email" ng-model="modeldat.from_email_address" placeholder="abc@xyz.com">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 com-marg">
<h2></h2>
</div>
</div>

<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 no-lpad">
<h5> <a class="content-link add-more"  href="javascript: void(0)" ng-click="addMoreCustomerContact()"><i class="fa fa-plus-circle"></i> Add More</a></h5>
</div>
<div class="right-fix dwn-nav com-marg">
<a class="btn btn-danger"  ng-click="saveCustomerData()">Save</a> 
<a class="btn btn-danger" href="">Cancel</a></div>
</div>

</div>

</div>
</div>

</div>
</div>
</div>

</body>
</html>


AngularJS dynamic form validation

var customersupportapp = angular.module('customersupportapp', []);
customersupportapp.controller('customerCtrl', function ($scope, $http, $timeout) {
    $scope.flagdata = false;
    $scope.tempData = {};
    $scope.tempData.customer_care_number = '';
    $scope.tempData.sec_customer_care_number = '';
    $scope.tempData.email_address = '';
    $scope.tempData.from_email_address = '';

    $scope.custservice = [];
    $scope.tempArray = [];
    
//angular.forEach($scope.tempData , function (key,value){
//    alert(key+value);
//    });
//    
//
    $scope.addMoreCustomerContact = function () {
        $scope.tempArray = {
            customer_care_number: '',
            sec_customer_care_number: '',
            email_address: '',
            from_email_address: ''
        };
        $scope.flagdata = true;
        $scope.custservice.push($scope.tempArray);
    };
      function ValidateEmail(email) {
        var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
        return expr.test(email);
    }

       $scope.saveCustomerData = function () {
        $scope.msgflag = false;
        if ($scope.tempData.customer_care_number == "") {
            $scope.msgString = "Please enter Customer Care Number!";
            $scope.className = 'danger';
            $scope.msgflag = true;
        } else if ($scope.tempData.email_address == "") {
            $scope.msgString = "Please enter  Email Address!";
            $scope.className = 'danger';
            $scope.msgflag = true;
        } else if (!ValidateEmail($scope.tempData.email_address)) {
            $scope.msgString = "Please enter valid email ID!";
            $scope.className = 'danger';
            $scope.msgflag = true;
        } else if ($scope.flagdata) {
            $.each($scope.custservice, function (index, value) {// jquery each method 
                //you can also use angular.forEach at the place of each
                if (!ValidateEmail(value.email_address)) {
                    $scope.msgString = "Please enter valid email ID!";
                    $scope.className = 'danger';
                    $scope.msgflag = true;
                }
                if (value.email_address == "") {
                    $scope.msgString = "Please enter  Email Address!";
                    $scope.className = 'danger';
                    $scope.msgflag = true;
                }
                if (value.customer_care_number == "") {
                    $scope.msgString = "Please enter Customer Care Number!";
                    $scope.className = 'danger';
                    $scope.msgflag = true;
                }
            });
        }else{
         $scope.msgflag = false;   
        }
        if ($scope.msgflag != true) {
           alert("form has been submitted");
        }

    }
    
});
customersupportapp.filter('capitalize', function () {
    return function (input) {
        return (!!input) ? input.charAt(0).toUpperCase() + input.substr(1).toLowerCase() : '';
    };
});

Download

See Also


QUOTES OF THE DAY

Knowledge itself is a power.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER