In previous articles we have learned AngularJS project setup, styling with Bootstrap, AngularJS structure, data-binding, routing, copying of Angular objects when a form is saved or canceled, inserting/updating forms, Bootstrap modal forms, and more.
Please have a look at my previous articles before going through this article.
In this article, we are going to see different Bootstrap form controls like date-picker, time-picker, typehead, popover and tooltip, collapse, and accordion.
Step 1. Let’s add some Bootstrap controls to our form.
In sfTemplate.html, add the following two controls.
Datepicker
<div class="form-group">
<label for="dateOfBirth" class="col-sm-3 control-label">Date of Birth</label>
<div class="col-sm-9" uib-datepicker ng-model="updatedStudent.dob" datepicker-options="options"></div>
</div>
Timepicker
<div class="form-group">
<label for="time" class="col-sm-3 control-label">Time</label>
<div class="col-sm-9" uib-timepicker ng-model="updatedStudent.time" datepicker-options="options"></div>
</div>
In the sfService.js, add the default date and time.
![Default]()
When you run the application, you can see the date and time picker with the default date and time data set to our form.
![New student]()
Step 2. Typehead
Used in input controls that provide suggestions while typing, its data can be from a static list or can be fetched from web-service calls.
In sfTemplate.html add typeahead in input control as.
<div class="form-group">
<label for="topCountries" class="col-sm-3 control-label">Top Countries</label>
<div class="col-sm-9">
<input type="text"
id="topCountries"
name="topCountries"
class="form-control"
ng-model="updatedStudent.topCountries"
uib-typeahead="country for country in topCountries | filter:$viewValue" />
</div>
</div>
For the list of countries, add the following array in sfController.js.
$scope.topCountries = [
"Alaska",
"Bhutan",
"Canada",
"Denmark",
"Finland",
"Greenland",
"Holland",
"India",
"Maldives",
"Nepal",
"Oman",
"USA",
"Japan",
"Qatar"
];
Run the application, you can see suggestions coming up while you type.
![Application]()
Step 3. Collapse
Used to show or hide the form controls.
In sfTemplate.html add the following controls.
<div class="form group col-sm-offset-3">
<div class="checkbox">
<label>
<input type="checkbox" value="isEligible" ng-model="updatedStudent.isEligible" />
Is student eligible?
</label>
</div>
</div>
<div class="form-group" uib-collapse="!updatedStudent.isEligible">
<label for="detailDescription" class="control-label col-sm-3">
For eligible students...
</label>
<div class="col-sm-9">
<textarea name="des" id="des" class="form-control" rows="5" cols="40" ng-model="updatedStudent.description">
</textarea>
</div>
</div>
When you select the checkbox then it shows the text as.
![Checkbox]()
Step 4. Popover and Tooltip
Used to provide information to the users.
Let’s add a tooltip to the existing control.
<div class="form group col-sm-offset-3">
<div class="checkbox">
<label>
<input type="checkbox" value="isEligible" ng-model="updatedStudent.isEligible" />
<span uib-tooltip="You need to be eligible student for further processing!"
tooltip-placement="top"
tooltip-trigger="mouseenter">
Is student eligible?
</span>
</label>
</div>
</div>
When you enter the mouse over the label, you will see a popover tooltip as below.
![Popover]()
The final “sfTemplate.html” will look like this.
<div class="modal-header">
<h1>Create New Student</h1>
</div>
<div class="modal-body">
<form role="form" class="form-horizontal">
<fieldset>
<legend>Basic Information</legend>
<div class="form-group">
<label for="fullName" class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input type="text" id="fullName" name="fullName" class="form-control"
ng-model="updatedStudent.fullName" />
</div>
</div>
<div class="form-group">
<label for="dateOfBirth" class="col-sm-3 control-label">Date of Birth</label>
<div class="col-sm-9" uib-datepicker ng-model="updatedStudent.dob" datepicker-options="options"></div>
</div>
<div class="form-group">
<label for="time" class="col-sm-3 control-label">Time</label>
<div class="col-sm-9" uib-timepicker ng-model="updatedStudent.time" datepicker-options="options"></div>
</div>
<div class="form-group">
<label for="topCountries" class="col-sm-3 control-label">Top Countries</label>
<div class="col-sm-9">
<input type="text" id="topCountries" name="topCountries" class="form-control"
ng-model="updatedStudent.topCountries"
uib-typeahead="country for country in topCountries | filter:$viewValue" />
</div>
</div>
<div class="form group col-sm-offset-3">
<div class="checkbox">
<label>
<input type="checkbox" value="isEligible" ng-model="updatedStudent.isEligible" />
<span uib-tooltip="You need to be eligible student for further processing!"
tooltip-placement="top" tooltip-trigger="mouseenter">
Is student eligible?
</span>
</label>
</div>
</div>
<div class="form-group" uib-collapse="!updatedStudent.isEligible">
<label for="detailDescription" class="control-label col-sm-3">
For eligible students...
</label>
<div class="col-sm-9">
<textarea name="des" id="des" class="form-control" rows="5" cols="40"
ng-model="updatedStudent.description"></textarea>
</div>
</div>
<div class="form-group">
<label for="objective" class="col-sm-3 control-label">Objective</label>
<div class="col-sm-9">
<textarea name="objective" id="objective" class="form-control" rows="5" cols="40"
ng-model="updatedStudent.objective"></textarea>
</div>
</div>
<div class="form-group">
<label for="department" class="col-sm-3 control-label">Department</label>
<div class="col-sm-9">
<select name="department" id="department" class="form-control"
ng-model="updatedStudent.department"
ng-options="dept for dept in departments"></select>
</div>
</div>
</fieldset>
<br />
<fieldset>
<legend>Hobbies</legend>
<div class="form-group">
<div class="col-sm-3"></div>
<div class="col-sm-9">
<div class="checkbox">
<label><input type="checkbox" value="hobbiesTravel" ng-model="updatedStudent.hobbiesTravel" />Travelling</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="hobbiesPhotography" ng-model="updatedStudent.hobbiesPhotography" />Photography</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="hobbiesGaming" ng-model="updatedStudent.hobbiesGaming" />Gaming</label>
</div>
<br />
</div>
</div>
</fieldset>
<fieldset>
<legend>Gender</legend>
<div class="form-group">
<div class="col-sm-3"></div>
<div class="col-sm-9">
<div class="radio">
<label><input type="radio" name="gender" value="Male" ng-model="updatedStudent.gender" /> Male</label><br />
</div>
<div class="radio">
<label><input type="radio" name="gender" value="Female" ng-model="updatedStudent.gender" /> Female</label><br />
</div>
<br />
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<div class="col-sm-offset-3 col-sm-9">
<div class="col-sm-offset-3 col-sm-9">
<input type="button" class="btn btn-default" value="Cancel" ng-click="cancelForm()" />
<input type="submit" class="btn btn-primary" value="Submit" ng-click="submitForm()" />
</div>
</div>
</div>
Final sfController.js will look like this.
studentFormsApp.controller('sfController', function sfController($scope, $window, $routeParams, sfService) {
if ($routeParams.id) {
$scope.student = sfService.getStudent($routeParams.id);
} else {
$scope.student = { id: 0 };
}
$scope.updatedStudent = angular.copy($scope.student);
$scope.departments = [
"Math",
"Physics",
"Chemistry",
"English"
];
$scope.topCountries = [
"Alaska",
"Bhutan",
"Canada",
"Denmark",
"Finland",
"Greenland",
"Holland",
"India",
"Maldives",
"Nepal",
"Oman",
"USA",
"Japan",
"Qatar"
];
$scope.submitForm = function () {
if ($scope.updatedStudent.id == 0) {
// Insert new student data
sfService.insertStudent($scope.updatedStudent);
} else {
// Update the student data
sfService.updateStudent($scope.updatedStudent);
}
$scope.student = angular.copy($scope.updatedStudent);
$window.history.back();
};
$scope.cancelForm = function () {
$window.history.back();
};
});
Please go through the official site for more information on controls.
Get the complete project from GitHub.
In this article, we have learned bootstrap form control. We will learn more in the next articles. I'll keep you posted.
Thanks, happy coding!