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 in 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 as,
When you run the application, you can see date and time picker with default date and time data set to our form.
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 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.
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 textarea as,
Step 4
Popover and Tooltip
Used to provide information to the users.
Let’s add tooltip on the existing control as,
- <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 mouse over the label, you will see a popover tooltip as below,
Final “sfTemplate.html” will look like this:
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) {
-
- sfService.insertStudent($scope.updatedStudent);
- }
- else {
-
- 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!