Apply Bootstrap CSS to AngularJS Form
In the previous section, we created AngularJS form but did not apply CSS classes. 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.
<html ng-app="myApp">
<head>
<link href="bootstrap.min.CSS" rel="stylesheet" />
<script src="angular.min.js"></script>
</head>
<center><h2> Bootstrap Form</h2></center>
<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
<head>
<title>Bootstrap Form</title>
</head>
<body>
</body>
</html>
Bootstrap CSS Classes for Styling Validation Messages:
In the previous section, we applied AngularJS built-in CSS classes to a form. Here, we will apply bootstrap CSS classes for styling form field error, warning, or validity.
Bootstrap includes following CSS classes for the form validation.
Bootstrap CSS Class |
Description |
Has-error |
Set this CSS class when a form field becomes invalid based on applied validation attributes. |
Has-warning |
Set this CSS class to display warning for a form field. |
Has-success |
Set this CSS class when a form field becomes valid based on applied validation attributes. |
The following is a student form with bootstrap validation classes.
Example: AngularJS form with bootstrap validation CSS classes:
<html>
<head>
<link href="bootstrap.min.css" rel="stylesheet" />
<script src="angular.min.js"></script>
</head>
<body ng-app class="container">
<center><h2>bootstrap validation CSS classes</h2></center>
<br />
<form class="form-horizontal" ng-submit="submitStudnetForm()" role="form" name="studentForm" novalidate>
<div class="form-group" ng-class="{'has-error': studentForm.firstName.$touched && studentForm.firstName.$error.required , 'has-success': studentForm.firstName.$valid }">
<label for="firstName" class="col-sm-3 control-label">First Name</label>
<div class="col-sm-6">
<input type="text" id="firstName" name="firstName" class="form-control" ng-model="firstName" required />
</div>
<div class="col-sm-3">
<span class="help-block" ng-show="studentForm.firstName.$touched && studentForm.firstName.$error.required">Please enter First Name.</span>
</div>
</div>
<div class="form-group" ng-class="{'has-error': studentForm.lastName.$touched && studentForm.lastName.$error.required , 'has-success': studentForm.lastName.$valid}">
<label for=" lastname" class="col-sm-3 control-label">
Last Name
</label>
<div class="col-sm-6">
<input type="text" id="lastName" name="lastName" class="form-control" ng-model="lastName" required />
</div>
<div class="col-sm-3">
<span class="help-block" ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.required">Please enter Last Name.</span>
</div>
</div>
<div class="form-group" ng-class="{'has-error': studentForm.emailId.$touched && studentForm.emailId.$error.email , 'has-success': studentForm.emailId.$valid}">
<label for="dob" class="col-sm-3 control-label">Email</label>
<div class="col-sm-6">
<input type="email" id="dob" name="emailId" class="form-control" ng-model="email" />
</div>
<div class="col-sm-3">
<span class="help-block" ng-show="studentForm.emailId.$touched && studentForm.emailId.$error.email">Please enter valid email.</span>
</div>
</div>
<input type="submit" value="Save" class="btn btn-primary col-sm-offset-3" />
<input type="button" value="Reset" class="btn" />
</form>
</body>
</html>
For
More Explanation
&
Online Classes
More Explanation
&
Online Classes
Contact Us:
+919885348743
+919885348743