Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
AngularJS Fundamentals
Data Entry Forms
Jim Duffy
TakeNote Technologies
© 2015 TakeNote Technologies
All Rights Reserved
Who Am I?
 Jim Duffy jduffy@takenote.com
 CEO/Founder of TakeNote Technologies www.takenote.com. We
provide web & mobile...
The Plan For This Session Is
 Data Binding Review
 Control Focus vs Data Model Focus
 Working With Input Elements
 Dat...
Data Binding Review
 One-way data binding
 ng-bind="Lastname"
 {{ Lastname }} syntax more common
 Two-way data binding...
Data Binding Review
© 2015 TakeNote Technologies
All Rights Reserved
DEMO 1
Control Focused Mindset
© 2015 TakeNote Technologies
All Rights Reserved
You’re stuck working
with the values as the
user ...
Control Focused Code
© 2015 TakeNote Technologies
All Rights Reserved
var city =
document.getElementById('city').value;
 ...
Data Model Focused Mindset
© 2015 TakeNote Technologies
All Rights Reserved
Data Model Focused Code
 Data model property (city) is bound to a
textbox
 User updates city textbox & data model
proper...
ng-Model Directive
 Used to bind model value to view input
directive
 Provides validation behavior (required,
number, em...
Text-Based Input Directives
 Text Inputs
 Text
 Textarea
 Email
 URL
 Number
© 2015 TakeNote Technologies
All Rights...
Text-Based Input Directives
© 2015 TakeNote Technologies
All Rights Reserved
DEMO 2
Radio Button Inputs
 Used to provide a fixed group of options for a
model field
 Grouped by using the same model field
...
Radio Button Inputs
© 2015 TakeNote Technologies
All Rights Reserved
DEMO 3
Checkbox Inputs
 Display a boolean input value
 Model field will contain true or false based on
checked status
 Optiona...
Checkbox Inputs
© 2015 TakeNote Technologies
All Rights Reserved
DEMO 4
Select Dropdown Inputs
 The select directive displays a dropdown list for
the user to select one or more items
 Can be p...
Select Dropdown Inputs
 Dynamically populating with ng-Options
directive
© 2015 TakeNote Technologies
All Rights Reserved...
Select Dropdown Inputs
© 2015 TakeNote Technologies
All Rights Reserved
DEMO 5
Data Validation Attributes
 ng-required: entry required
 ng-minlength: min string length
 ng-maxlength: max string leng...
Data Validation Attributes
© 2015 TakeNote Technologies
All Rights Reserved
<div class="form-group">
<label for="firstname...
Data Entry States
 Properties
 $pristine: True if user has not
interacted with the form or control yet
 $dirty: True if...
Data Entry Control States #2
 Properties
 $touched: True if control has lost
focus
 $untouched: True if control has not...
Show Validation Messages
© 2015 TakeNote Technologies
All Rights Reserved
<div class="form-group">
<label for="firstname">...
Show Validation Messages
© 2015 TakeNote Technologies
All Rights Reserved
DEMO 6
CSS Classes
CSS classes added & removed from elements
depending on the validity of the model:
 ng-pristine: Elements the ...
CSS Classes #2
 ng-touched: Elements that have been
blurred are added to this class
 ng-untouched: Elements that have
no...
CSS Classes
© 2015 TakeNote Technologies
All Rights Reserved
form .ng-pristine {
background-color: #fffeb9;
}
form .ng-val...
CSS Classes
© 2015 TakeNote Technologies
All Rights Reserved
DEMO 7
Form Submission Events
 ng-submit
 Used at the <form> level to specify an
expression to be evaluated when form is
submit...
Form Submission Events
 ng-click
 Used on a button to specify a function to
run when clicked
© 2015 TakeNote Technologie...
Form Submission Events
© 2015 TakeNote Technologies
All Rights Reserved
DEMO 8
Canceling & Reverting Changes
 Done by creating a copy of the original model
© 2015 TakeNote Technologies
All Rights Rese...
Canceling & Reverting Changes
© 2015 TakeNote Technologies
All Rights Reserved
DEMO 9
The Plan For This Session Was
 Data Binding Review
 Control Focus vs Data Model Focus
 Working With Input Elements
 Da...
Resources
 https://www.angularjs.org/
 https://github.com/angular/angular.js
 https://docs.angularjs.org/guide
 https:...
Thank You for Attending!
 My contact info:
Jim Duffy
jduffy@takenote.com
TakeNote Technologies
www.takenote.com
Twitter: ...
TakeNote Technologies
© 2015 TakeNote Technologies
All Rights Reserved
Training Division
 Provides public and on-
site de...
Upcoming SlideShare
Loading in …5
×

AngularJS Fundamentals: Date Entry Forms

861 views

Published on

AngularJS, it's all the rage these days and it's the biggest thing in the JavaScript world since JQuery. Have you heard of it? If you're a web developer odds are you've heard of it and if you haven't you will the next time you go looking for a job. In this presentation you will learn about something at the heart of most line-of-business applications, creating data entry forms. You'll learn about working with data entry form controls, data validation attributes, determining if the user has interacted with a control, determining if an entry is valid or invalid, determining which specific data validation error has occurred, creating client-side business rules and applying CSS styles to provide a visual indicator of a control's data entry status. You will also learn where to find more information and additional guidance on taking your next steps on the road to building AngularJS applications.

Published in: Technology
  • Be the first to comment

AngularJS Fundamentals: Date Entry Forms

  1. 1. AngularJS Fundamentals Data Entry Forms Jim Duffy TakeNote Technologies © 2015 TakeNote Technologies All Rights Reserved
  2. 2. Who Am I?  Jim Duffy jduffy@takenote.com  CEO/Founder of TakeNote Technologies www.takenote.com. We provide web & mobile developer training and consulting  Blog: www.geekswithblogs.net/takenote/  Twitter: @jmduffy  Microsoft Regional Director www.msrd.io  11 time Microsoft Most Valuable Professional (MVP)  HTML5, JavaScript, AngularJS, .NET, ASP.NET & SQL Server Instructor, Mentor, Developer, and Consultant  Experienced conference presenter  Contributor to CODE Magazine © 2015 TakeNote Technologies All Rights Reserved
  3. 3. The Plan For This Session Is  Data Binding Review  Control Focus vs Data Model Focus  Working With Input Elements  Data Validation Attributes  Data Entry States  Show Validation Messages  Use CSS Classes  Form Submission Options © 2015 TakeNote Technologies All Rights Reserved
  4. 4. Data Binding Review  One-way data binding  ng-bind="Lastname"  {{ Lastname }} syntax more common  Two-way data binding  ng-model="Lastname" © 2015 TakeNote Technologies All Rights Reserved <div> <label for="Lastname">Last Name:</label> <input type="text" name="Lastname" ng-model="vm.Lastname" /> </div>
  5. 5. Data Binding Review © 2015 TakeNote Technologies All Rights Reserved DEMO 1
  6. 6. Control Focused Mindset © 2015 TakeNote Technologies All Rights Reserved You’re stuck working with the values as the user sees them. This means having to code some transformations.
  7. 7. Control Focused Code © 2015 TakeNote Technologies All Rights Reserved var city = document.getElementById('city').value;  Define a textbox  Assign a value to a textbox  Data is updated and Save button clicked  Grab textbox value and assign to a var document.getElementById('city').value = ‘Hollywood'; <input type="text" id="city" />
  8. 8. Data Model Focused Mindset © 2015 TakeNote Technologies All Rights Reserved
  9. 9. Data Model Focused Code  Data model property (city) is bound to a textbox  User updates city textbox & data model property (city) automagically reflects user changes OR  Data model property (city) is programmatically changed and textbox automagically reflects the change  Controller works with a model not HTML © 2015 TakeNote Technologies All Rights Reserved <input type="text" ng-model="city" />
  10. 10. ng-Model Directive  Used to bind model value to view input directive  Provides validation behavior (required, number, email, url)  Keeps the state of the control (valid/invalid, dirty/pristine, touched/untouched & validation errors)  Sets related css classes on the element (ng- valid, ng-invalid, ng-dirty, ng- pristine, ng-touched, ng-untouched)  Registers the control with its parent form © 2015 TakeNote Technologies All Rights Reserved
  11. 11. Text-Based Input Directives  Text Inputs  Text  Textarea  Email  URL  Number © 2015 TakeNote Technologies All Rights Reserved All support: ng-model= "emp.Lastname" required ng-required="true/false" ng-minlength = 2 ng-maxlength = 15 ng-pattern = "/^[a-z]+$/"
  12. 12. Text-Based Input Directives © 2015 TakeNote Technologies All Rights Reserved DEMO 2
  13. 13. Radio Button Inputs  Used to provide a fixed group of options for a model field  Grouped by using the same model field  HTML value attribute specifies value stored in model © 2015 TakeNote Technologies All Rights Reserved <label><input type="radio" ng-model="employee.gender" value="M">Male </label> <label><input type="radio" ng-model="employee.gender" value="F">Female </label>
  14. 14. Radio Button Inputs © 2015 TakeNote Technologies All Rights Reserved DEMO 3
  15. 15. Checkbox Inputs  Display a boolean input value  Model field will contain true or false based on checked status  Optionally you can store different values in the model based on ng-true-value and ng-false- value. © 2015 TakeNote Technologies All Rights Reserved <input type="checkbox“ ng-model="employee.status"> <input type="checkbox" ng-model="employee.status" ng-true-value="'Active'" ng-false-value="'Inactive'">
  16. 16. Checkbox Inputs © 2015 TakeNote Technologies All Rights Reserved DEMO 4
  17. 17. Select Dropdown Inputs  The select directive displays a dropdown list for the user to select one or more items  Can be populated statically or from an array in the scope  Option value = "" specifies which item to display when bound model value doesn’t match items in list © 2015 TakeNote Technologies All Rights Reserved <select ng-model="employee.department"> <option value="sales">Sales</option> <option value="admin“>Admin</option> <option value="">-- No Selection --</option> </select>
  18. 18. Select Dropdown Inputs  Dynamically populating with ng-Options directive © 2015 TakeNote Technologies All Rights Reserved Controller Code: vm.colorsArray = ["Red", "Green", "Blue"]; View Markup: <select id="colorsArray" ng-model=“selectedColor" ng-options="color for color in vm.colorsArray"> <option value="">[No color]</option> </select>
  19. 19. Select Dropdown Inputs © 2015 TakeNote Technologies All Rights Reserved DEMO 5
  20. 20. Data Validation Attributes  ng-required: entry required  ng-minlength: min string length  ng-maxlength: max string length  ng-pattern: regex comparison  Visibility attributes review  ng-show: Displays an element  ng-hide: Hides an element © 2015 TakeNote Technologies All Rights Reserved
  21. 21. Data Validation Attributes © 2015 TakeNote Technologies All Rights Reserved <div class="form-group"> <label for="firstname">First Name:</label> <input type="text" name="firstname" autofocus placeholder="Enter first name" ng-required="true" ng-model="firstname" ng-minlength="2" ng-maxlength="20" ng-pattern="/^[a-z]+$/" class="form-control" /> </div>
  22. 22. Data Entry States  Properties  $pristine: True if user has not interacted with the form or control yet  $dirty: True if user has already interacted with the form or control  $valid: True if there is no error on the form or control  $invalid: True if there is at least one error on the form or control © 2015 TakeNote Technologies All Rights Reserved
  23. 23. Data Entry Control States #2  Properties  $touched: True if control has lost focus  $untouched: True if control has not lost focus yet  $error: Is an object hash, containing references to controls or forms with failing validators © 2015 TakeNote Technologies All Rights Reserved
  24. 24. Show Validation Messages © 2015 TakeNote Technologies All Rights Reserved <div class="form-group"> <label for="firstname">First Name:</label> <input type="text" name="firstname" autofocus required placeholder="Enter first name" ng-model="firstname" ng-minlength="2" ng-maxlength="20" ng-pattern="/^[a-z]+$/" class="form-control" /> <div class="error-container" ng-show="myForm.firstname.$dirty && myForm.firstname.$invalid"> <small class="error" ng-show="myForm.firstname.$error.required"> First name is required.</small> <small class="error" ng-show="myForm.firstname.$error.minlength"> First name requires at least 2 char.</small> <small class="error " ng-show="myForm.firstname.$error.maxlength"> First Name cannot exceed 20 chars.</small> </div> </div>  Use $dirty && $valid to determine if there is an error  Use $error to determine specific error
  25. 25. Show Validation Messages © 2015 TakeNote Technologies All Rights Reserved DEMO 6
  26. 26. CSS Classes CSS classes added & removed from elements depending on the validity of the model:  ng-pristine: Elements the user has not interacted are added to this class  ng-dirty: Elements the user has interacted with are added to this class  ng-valid: Elements that are valid are added to this class  ng-invalid: Elements that are not valid are added to this class © 2015 TakeNote Technologies All Rights Reserved
  27. 27. CSS Classes #2  ng-touched: Elements that have been blurred are added to this class  ng-untouched: Elements that have not been blurred are added to this class © 2015 TakeNote Technologies All Rights Reserved
  28. 28. CSS Classes © 2015 TakeNote Technologies All Rights Reserved form .ng-pristine { background-color: #fffeb9; } form .ng-valid.ng-dirty { background-color: lightgreen; } form .ng-invalid.ng-dirty { background-color: #ff0000; }
  29. 29. CSS Classes © 2015 TakeNote Technologies All Rights Reserved DEMO 7
  30. 30. Form Submission Events  ng-submit  Used at the <form> level to specify an expression to be evaluated when form is submitted  Form submits when user presses Enter in an input element or when button is clicked  Use on forms with one input element and only one button (Example: Search Form) © 2015 TakeNote Technologies All Rights Reserved <form ng-submit="processForm(searchText)"> <input ng-model="searchText"> </form>
  31. 31. Form Submission Events  ng-click  Used on a button to specify a function to run when clicked © 2015 TakeNote Technologies All Rights Reserved <form> <input ng-model=“firstName"> <input ng-model=“lastName"> … <button ng-click="saveMeObiWan()">Save</button> </form>
  32. 32. Form Submission Events © 2015 TakeNote Technologies All Rights Reserved DEMO 8
  33. 33. Canceling & Reverting Changes  Done by creating a copy of the original model © 2015 TakeNote Technologies All Rights Reserved vm.employee = {"firstname": "elmer", "lastname": "FUDD", "email": "getwabbit@fake.com" }; var vm.origEmp = angular.copy(vm.employee); vm.revertAllEmployeeChanges = function() { vm.employee = angular.copy(vm.origEmp); vm.employeeForm.$setPristine(); }; vm.canRevert = function() { return !angular.equals(vm.employee, vm.origEmp); };
  34. 34. Canceling & Reverting Changes © 2015 TakeNote Technologies All Rights Reserved DEMO 9
  35. 35. The Plan For This Session Was  Data Binding Review  Control Focus vs Data Model Focus  Working With Input Elements  Data Validation Attributes  Data Entry States  Show Validation Messages  Use CSS Classes  Form Submission Options © 2015 TakeNote Technologies All Rights Reserved
  36. 36. Resources  https://www.angularjs.org/  https://github.com/angular/angular.js  https://docs.angularjs.org/guide  https://blog.angularjs.org/  http://www.angularjshub.com/ TakeNote Technologies Hands On AngularJS Training Classes © 2015 TakeNote Technologies All Rights Reserved
  37. 37. Thank You for Attending!  My contact info: Jim Duffy jduffy@takenote.com TakeNote Technologies www.takenote.com Twitter: @jmduffy © 2015 TakeNote Technologies All Rights Reserved
  38. 38. TakeNote Technologies © 2015 TakeNote Technologies All Rights Reserved Training Division  Provides public and on- site developer training classes and mentoring in:  C#  ASP.NET MVC  SQL Server  HTML5  JavaScript  AngularJS  GrapeCity ActiveReports Consulting Division  Develops new web and mobile solutions  Develops cloud-based solutions and migrate existing solutions to the cloud  Convert legacy solutions into modern web & mobile solutions  Manages new or existing projects  Supplements your development team

×