pTutorial

New way to learn Programming

AngularJS dynamic form

AngularJS dynamic form example with bootstrap

AngularJS dynamic form generation: AngularJS dynamic form creation using ng-repeat and array push method. Using the following code you can create form dynamically. Number of field may be vary, it may be one field or many field. In my case four text field will be added in every time when you click on add more.

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.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="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">
</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">
</div>
</div>
</div>
</div>
<div class="row com-marg">
<div class="col-xs-12 col-sm-6 col-md-6 com-marg">
<h5></span>Email Address</h5>
<input class="form-control" type="text" name="email_text" 
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">Save</a> 
<a class="btn btn-danger" href="">Cancel</a></div>
</div>

</div>

</div>
</div>

</div>
</div>

</body>
</html>


AngularJS dynamic form example

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 = [];

    $scope.addMoreCustomerContact = function () {
        $scope.tempArray = {
            customer_care_number: '',
            sec_customer_care_number: '',
            email_address: '',
            from_email_address: ''
        };
        $scope.custservice.push($scope.tempArray);

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

Download

See Also


QUOTES OF THE DAY

Well-begun is half done.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER