Angular, Bootstrap and ASP.NET MVC - Bootstrap Form Controls - Part Eight

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 

  1. <div class="form-group">  
  2.     <label for="dateOfBirth" class="col-sm-3 control-label">Date of Birth</label>  
  3.     <div class="col-sm-9" uib-datepicker ng-model="updatedStudent.dob" datepicker-options="options"></div>  
  4. </div>  

Timepicker

  1. <div class="form-group">  
  2.     <label for="time" class="col-sm-3 control-label">Time</label>  
  3.     <div class="col-sm-9" uib-timepicker ng-model="updatedStudent.time" datepicker-options="options"></div>  
  4. </div>  

In the sfService.js, add the default date and time as,

ASP.NET

When you run the application, you can see date and time picker with default date and time data set to our form.ASP.NET

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, 

  1. <div class="form-group">  
  2.     <label for="topCountries" class="col-sm-3 control-label">Top Countries</label>  
  3.     <div class="col-sm-9">  
  4.         <input type="text" id="topCountries" name="topCountries" class="form-control" ng-model="updatedStudent.topCountries"  
  5.                 uib-typeahead="country for country in topCountries | filter:$viewValue" />  
  6.     </div>  
  7. </div>  

For the list of countries, add following array in sfController.js,

  1. $scope.topCountries = [  
  2.     "Alaska",  
  3.     "Bhutan",  
  4.     "Canada",  
  5.     "Denmark",  
  6.     "Finland",  
  7.     "Greenland",  
  8.     "Holland",  
  9.     "India",  
  10.     "Maldives",  
  11.     "Nepal",  
  12.     "Oman",  
  13.     "USA",  
  14.     "Japan",  
  15.     "Qatar"  
  16. ]  

Run the application, you can see suggestions coming up while you type. 

ASP.NET

Step 3

Collapse
Used to show or hide the form controls.

In sfTemplate.html add the following controls, 

  1. <div class="form group col-sm-offset-3">  
  2.     <div class="checkbox" >  
  3.         <label>  
  4.             <input type="checkbox" value="isEligible" ng-model="updatedStudent.isEligible" />  
  5.             Is student eligible?  
  6.         </label>  
  7.     </div>  
  8. </div>  
  9.   
  10. <div class="form-group" uib-collapse="!updatedStudent.isEligible">  
  11.     <label for="detailDescription" class="control-label col-sm-3">  
  12.         For eligible students...  
  13.     </label>  
  14.     <div class="col-sm-9">  
  15.         <textarea name="des" id="des" class="form-control" rows="5" cols="40"  
  16.                     ng-model="updatedStudent.description">  
  17.         </textarea>  
  18.     </div>  
  19. </div>  

When you select the checkbox then it shows the textarea as,

ASP.NET

Step 4

Popover and Tooltip
Used to provide information to the users.

Let’s add tooltip on the existing control as, 

  1. <div class="form group col-sm-offset-3">  
  2.     <div class="checkbox">  
  3.         <label>  
  4.             <input type="checkbox" value="isEligible" ng-model="updatedStudent.isEligible" />  
  5.             <span uib-tooltip="You need to be eligible student for further processing!"  
  6.                     tooltip-placement="top"  
  7.                     tooltip-trigger="mouseenter">  
  8.                 Is student eligible?  
  9.             </span>  
  10.         </label>  
  11.     </div>  
  12. </div>  

When you enter mouse over the label, you will see a popover tooltip as below,ASP.NET
Final “sfTemplate.html” will look like this:

  1. <div class="modal-header">  
  2.     <h1>Create New Student</h1>  
  3. </div>  
  4.   
  5. <div class="modal-body">  
  6.     <form role="form" class="form-horizontal">  
  7.         <fieldset>  
  8.             <legend>Basic Information</legend>  
  9.             <div class="form-group">  
  10.                 <label for="fullName" class="col-sm-3 control-label">Name</label>  
  11.                 <div class="col-sm-9">  
  12.                     <input type="text" id="fullName" name="fullName" class="form-control"  
  13.                            ng-model="updatedStudent.fullName" />  
  14.                 </div>  
  15.             </div>  
  16.   
  17.             <div class="form-group">  
  18.                 <label for="dateOfBirth" class="col-sm-3 control-label">Date of Birth</label>  
  19.                 <div class="col-sm-9" uib-datepicker ng-model="updatedStudent.dob" datepicker-options="options"></div>  
  20.             </div>  
  21.   
  22.   
  23.             <div class="form-group">  
  24.                 <label for="time" class="col-sm-3 control-label">Time</label>  
  25.                 <div class="col-sm-9" uib-timepicker ng-model="updatedStudent.time" datepicker-options="options"></div>  
  26.             </div>  
  27.   
  28.             <div class="form-group">  
  29.                 <label for="topCountries" class="col-sm-3 control-label">Top Countries</label>  
  30.                 <div class="col-sm-9">  
  31.                     <input type="text" id="topCountries" name="topCountries" class="form-control" ng-model="updatedStudent.topCountries"  
  32.                            uib-typeahead="country for country in topCountries | filter:$viewValue" />  
  33.                 </div>  
  34.             </div>  
  35.   
  36.             <div class="form group col-sm-offset-3">  
  37.                 <div class="checkbox">  
  38.                     <label>  
  39.                         <input type="checkbox" value="isEligible" ng-model="updatedStudent.isEligible" />  
  40.                         <span uib-tooltip="You need to be eligible student for further processing!"  
  41.                               tooltip-placement="top"  
  42.                               tooltip-trigger="mouseenter">  
  43.                             Is student eligible?  
  44.                         </span>  
  45.                     </label>  
  46.                 </div>  
  47.             </div>  
  48.   
  49.             <div class="form-group" uib-collapse="!updatedStudent.isEligible">  
  50.                 <label for="detailDescription" class="control-label col-sm-3">  
  51.                     For eligible students...  
  52.                 </label>  
  53.                 <div class="col-sm-9">  
  54.                     <textarea name="des" id="des" class="form-control" rows="5" cols="40"  
  55.                               ng-model="updatedStudent.description"></textarea>  
  56.                 </div>  
  57.             </div>  
  58.   
  59.             <div class="form-group">  
  60.                 <label for="objective" class="col-sm-3 control-label">Objective</label>  
  61.                 <div class="col-sm-9">  
  62.                     <textarea name="objective" id="objective" class="form-control" rows="5" cols="40" ng-model="updatedStudent.objective"></textarea>  
  63.                 </div>  
  64.             </div>  
  65.   
  66.             <div class="form-group">  
  67.                 <label for="department" class="col-sm-3 control-label">Department</label>  
  68.                 <div class="col-sm-9">  
  69.                     <select name="department" id="department" class="form-control"  
  70.                             ng-model="updatedStudent.department"  
  71.                             ng-options="dept for dept in departments"></select>  
  72.                 </div>  
  73.             </div>  
  74.         </fieldset>  
  75.   
  76.         <br />  
  77.   
  78.         <fieldset>  
  79.             <legend>Hobbies</legend>  
  80.             <div class="form-group">  
  81.                 <div class="col-sm-3">  
  82.   
  83.                 </div>  
  84.                 <div class="col-sm-9">  
  85.                     <div class="checkbox">  
  86.                         <label><input type="checkbox" value="hobbiesTravel" ng-model="updatedStudent.hobbiesTravel" />Travelling</label>  
  87.                     </div>  
  88.                     <div class="checkbox">  
  89.                         <label><input type="checkbox" value="hobbiesPhotography" ng-model="updatedStudent.hobbiesPhotography" />Photography</label>  
  90.                     </div>  
  91.                     <div class="checkbox">  
  92.                         <label><input type="checkbox" value="hobbiesGaming" ng-model="updatedStudent.hobbiesGaming" />Gaming</label>  
  93.                     </div>  
  94.                     <br />  
  95.                 </div>  
  96.             </div>  
  97.         </fieldset>  
  98.   
  99.         <fieldset>  
  100.             <legend>Gender</legend>  
  101.             <div class="form-group">  
  102.                 <div class="col-sm-3"></div>  
  103.                 <div class="col-sm-9">  
  104.                     <div class="radio">  
  105.                         <label><input type="radio" name="gender" value="Male" ng-model="updatedStudent.gender" /> Male</label><br />  
  106.                     </div>  
  107.                     <div class="radio">  
  108.                         <label><input type="radio" name="gender" value="Female" ng-model="updatedStudent.gender" /> Female</label><br />  
  109.                     </div>  
  110.                     <br />  
  111.                 </div>  
  112.             </div>  
  113.         </fieldset>  
  114.     </form>  
  115. </div>  
  116.   
  117. <div class="modal-footer">  
  118.     <div class="col-sm-offset-3 col-sm-9">  
  119.         <div class="col-sm-offset-3 col-sm-9">  
  120.             <input type="button" class="btn btn-default" value="Cancel" ng-click="cancelForm()" />  
  121.             <input type="submit" class="btn btn-primary" value="Submit" ng-click="submitForm()" />  
  122.         </div>  
  123.     </div>  
  124. </div>  

Final sfController.js will look like this:

  1. studentFormsApp.controller('sfController',  
  2.     function sfController($scope, $window, $routeParams, sfService) {  
  3.         if ($routeParams.id) {  
  4.             $scope.student = sfService.getStudent($routeParams.id);  
  5.         }  
  6.         else {  
  7.             $scope.student = { id: 0 };  
  8.         }  
  9.   
  10.   
  11.         $scope.updatedStudent = angular.copy($scope.student);  
  12.   
  13.         $scope.departments = [  
  14.                "Math",  
  15.                "Physics",  
  16.                "Chemistry",  
  17.                "English"  
  18.         ];  
  19.   
  20.         $scope.topCountries = [  
  21.             "Alaska",  
  22.             "Bhutan",  
  23.             "Canada",  
  24.             "Denmark",  
  25.             "Finland",  
  26.             "Greenland",  
  27.             "Holland",  
  28.             "India",  
  29.             "Maldives",  
  30.             "Nepal",  
  31.             "Oman",  
  32.             "USA",  
  33.             "Japan",  
  34.             "Qatar"  
  35.         ]  
  36.         $scope.submitForm = function () {  
  37.             if ($scope.updatedStudent.id == 0) {  
  38.                 //insert new student data  
  39.                 sfService.insertStudent($scope.updatedStudent);  
  40.             }  
  41.             else {  
  42.                 //update the student data  
  43.                 sfService.updateStudent($scope.updatedStudent);  
  44.             }  
  45.   
  46.             $scope.student = angular.copy($scope.updatedStudent);  
  47.             $window.history.back();  
  48.         }  
  49.         $scope.cancelForm = function () {  
  50.             $window.history.back();  
  51.         }  
  52.     });  

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!


Similar Articles