-

pTutorial

New way to learn Programming

AngularJs Dynamic form data on controller

AngularJS dynamic form data post

AngularJs Dynamic form data on controller : AngularJS dynamic form data (POST and GET data) on controller. Using the following code you can create form dynamically and validate and save in the database. Number of field may be vary. In my case two text field are mandatory and other two are not mandatory. Using this example you can get mandatory and non mandarty data on controller.

HTML

<html>
    <head>
        <link href="http://freeonlinecompiler.ptutorial.com/css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="http://www.ptutorial.com/font-awesome-4.5.0/css/font-awesome.min.css" media="screen" rel="stylesheet" type="text/css">            <script src="http://www.ptutorial.com/angularjs/angular.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="app-angularjs-dynamic-form-data-on-controller.js"></script>
        <script type="text/javascript" src="http://freeonlinecompiler.ptutorial.com/js/jquery.min.js"></script>
    </head> 
    <body>
        <div ng-app="ukapp">
            <div ng-controller="ukCtrl" 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

var ukapp = angular.module('ukapp', []);
ukapp.controller('ukCtrl', 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 See the data on firebug");
           $scope.sendData();
        }
    }

    $scope.sendData =function (){ /// you can send data in form of JSon to any server side Language like PHP and get Data easily.
          formData = {maindata: $scope.tempData, optionalData: $scope.custservice};
              console.log(formData);
            var postRequest = $http({
                method: "POST",
                url: "URL",
                data: formData
            });
}

});

Download

See Also


QUOTES OF THE DAY

The heart of melody can never be put down.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER