top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

Apply Bootstrap CSS to AngularJS Form

0 votes
304 views

Let's apply simple bootstrap CSS classes to make it responsive.

We will be applying following bootstrap CSS classes:

  • container: Top level bootstrap class with fixed width and left margin.
  • form-horizontal: Places labels to the left of input/select controls.
  • form-group: wraps labels and controls in div for optimum spacing.
  • control-label: groups labels and input/select controls.
  • form-control: styles for input/textarea/select elements.
  • radio: styles for radio element.
  • checkbox: styles for checkbox element.
  • btn, btn-primary: styles for button element.

The following is a student form with bootstrap styling.

Example: AngularJS form with bootstrap CSS classes

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <link href="~/Content/bootstrap.CSS" rel="stylesheet" />
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-controller="studentController" class="container" > <br />
    <form class="form-horizontal" ng-submit="submitStudnetForm()" role="form">
        <div class="form-group">
            <label for="firstName" class="col-sm-3 control-label">First Name</label>
            <div class="col-sm-6">
                <input type="text" id="firstName" class="form-control" ng-model="student.firstName" />
            </div>
            <div class="col-sm-3"></div>

        </div>
        <div class="form-group">
            <label for="lastName" class="col-sm-3 control-label">Last Name</label>
            <div class="col-sm-6">
                <input type="text" id="lastName" class="form-control" ng-model="student.lastName" />
            </div>
            <div class="col-sm-3"></div>
        </div>
        
        <div class="form-group">
            <label for="dob" class="col-sm-3 control-label">DoB</label>
            <div class="col-sm-2">
                <input type="date" id="dob" class="form-control" ng-model="student.DoB" />
            </div>
            <div class="col-sm-7"></div>
        </div>
        
        <div class="form-group">
            <label for="gender" class="col-sm-3 control-label">Gender</label>
            <div class="col-sm-2">
                <select id="gender" class="form-control" ng-model="student.gender">
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                </select>
            </div>
            <div class="col-sm-7"></div>
        </div>
        
        <div class="form-group">
            <div class="col-sm-3"></div>
            <div class="col-sm-2">
                <span><b>Training Location</b></span>
                <div class="radio">
                    <label><input value="online" type="radio" name="training" ng-model="student.trainingType" />Online</label>
                </div>
                <div class="radio">
                    <label><input value="onsite" type="radio" name="training" ng-model="student.trainingType" />OnSite</label>
                </div>
            </div>
            <div class="col-sm-7">
                <span><b>Main Subjects</b></span>
                <div class="checkbox">
                    <label><input type="checkbox" ng-model="student.maths" />Maths</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" ng-model="student.physics" />Physics</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox"  ng-model="student.chemistry" />Chemistry</label>
                </div>
            </div>
        </div>

        <input type="submit" value="Save" class="btn btn-primary col-sm-offset-3" />
        <input type="reset" value="Reset" ng-click="resetForm()" 
    </form>
    <script>
     //1. create app module 
        var studentApp = angular.module('studentApp', []);

        //2. create controller
        studentApp.controller("studentController", function ($scope, $http) {
  
            //3. attach originalStudent model object
            $scope.originalStudent = {
                firstName: 'James',
                lastName: 'Bond',
                DoB: new Date('01/31/1980'),
                gender: 'male',
                trainingType: 'online',
                maths: false,
                physics: true,
                chemistry: true
            };

            //4. copy originalStudent to student. student will be bind to a form 
            $scope.student = angular.copy($scope.originalStudent);

            //5. create submitStudentForm() function. This will be called when user submits the form
            $scope.submitStudnetForm = function () {

                var onSuccess = function (data, status, headers, config) {
                    alert('Student saved successfully.');
                };

                var onError = function (data, status, headers, config) {
                    alert('Error occured.');
                }

                $http.post('/student/submitData', { student:$scope.student })
                    .success(onSuccess)
                    .error(onError);

            };

            //6. create resetForm() function. This will be called on Reset button click.  
            $scope.resetForm = function () {
                $scope.student = angular.copy($scope.OriginalStudent);
            };
    });
    </script>   
</body>
</html>
posted Jan 31, 2017 by Shivaranjini

  Promote This Article
Facebook Share Button Twitter Share Button LinkedIn Share Button


Related Articles

Let's apply simple bootstrap CSS classes to make it responsive.

We will be applying following bootstrap CSS classes:

  • container: Top level bootstrap class with fixed width and left margin.
  • form-horizontal: Places labels to the left of input/select controls.
  • form-group: wraps labels and controls in div for optimum spacing.
  • control-label: groups labels and input/select controls.
  • form-control: styles for input/textarea/select elements.
  • radio: styles for radio element.
  • checkbox: styles for checkbox element.
  • btn, btn-primary: styles for button element.

The following is a student form with bootstrap styling.

Example: AngularJS form with bootstrap CSS classes

 

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <link href="~/Content/bootstrap.CSS" rel="stylesheet" />
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-controller="studentController" class="container" > <br />
    <form class="form-horizontal" ng-submit="submitStudnetForm()" role="form">
        <div class="form-group">
            <label for="firstName" class="col-sm-3 control-label">First Name</label>
            <div class="col-sm-6">
                <input type="text" id="firstName" class="form-control" ng-model="student.firstName" />
            </div>
            <div class="col-sm-3"></div>

        </div>
        <div class="form-group">
            <label for="lastName" class="col-sm-3 control-label">Last Name</label>
            <div class="col-sm-6">
                <input type="text" id="lastName" class="form-control" ng-model="student.lastName" />
            </div>
            <div class="col-sm-3"></div>
        </div>
        
        <div class="form-group">
            <label for="dob" class="col-sm-3 control-label">DoB</label>
            <div class="col-sm-2">
                <input type="date" id="dob" class="form-control" ng-model="student.DoB" />
            </div>
            <div class="col-sm-7"></div>
        </div>
        
        <div class="form-group">
            <label for="gender" class="col-sm-3 control-label">Gender</label>
            <div class="col-sm-2">
                <select id="gender" class="form-control" ng-model="student.gender">
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                </select>
            </div>
            <div class="col-sm-7"></div>
        </div>
        
        <div class="form-group">
            <div class="col-sm-3"></div>
            <div class="col-sm-2">
                <span><b>Training Location</b></span>
                <div class="radio">
                    <label><input value="online" type="radio" name="training" ng-model="student.trainingType" />Online</label>
                </div>
                <div class="radio">
                    <label><input value="onsite" type="radio" name="training" ng-model="student.trainingType" />OnSite</label>
                </div>
            </div>
            <div class="col-sm-7">
                <span><b>Main Subjects</b></span>
                <div class="checkbox">
                    <label><input type="checkbox" ng-model="student.maths" />Maths</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" ng-model="student.physics" />Physics</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox"  ng-model="student.chemistry" />Chemistry</label>
                </div>
            </div>
        </div>

        <input type="submit" value="Save" class="btn btn-primary col-sm-offset-3" />
        <input type="reset" value="Reset" ng-click="resetForm()" 
    </form>
    <script>
     //1. create app module 
        var studentApp = angular.module('studentApp', []);

        //2. create controller
        studentApp.controller("studentController", function ($scope, $http) {
  
            //3. attach originalStudent model object
            $scope.originalStudent = {
                firstName: 'James',
                lastName: 'Bond',
                DoB: new Date('01/31/1980'),
                gender: 'male',
                trainingType: 'online',
                maths: false,
                physics: true,
                chemistry: true
            };

            //4. copy originalStudent to student. student will be bind to a form 
            $scope.student = angular.copy($scope.originalStudent);

            //5. create submitStudentForm() function. This will be called when user submits the form
            $scope.submitStudnetForm = function () {

                var onSuccess = function (data, status, headers, config) {
                    alert('Student saved successfully.');
                };

                var onError = function (data, status, headers, config) {
                    alert('Error occured.');
                }

                $http.post('/student/submitData', { student:$scope.student })
                    .success(onSuccess)
                    .error(onError);

            };

            //6. create resetForm() function. This will be called on Reset button click.  
            $scope.resetForm = function () {
                $scope.student = angular.copy($scope.OriginalStudent);
            };
    });
    </script>   
</body>
</html>
READ MORE
...