Angular 6 Form Validation with Angular Material 6. Slides presented at "SLDF Meetup - October 2018" By Sachini Chathurika & Malika Munaweera

1. Angular 6
Form
Validations BY
SACHINI & MALIKA

2. SACHINI CHARTHURIKA
Software Engineer @ Ascentic
https://www.linkedin.com/in/sachinichathurika/
MALIKA MUNAWEERA
Software Engineer @ Ascentic
https://www.linkedin.com/in/malikamunaweera/

3. Agenda
1. Angular 6 Overview.
2. Angular 6 form validation.
 Template driven method.
 Reactive forms method.
3. Add Angular Material to reactive forms
with validations.
4. Advantages and disadvantages

4. Angular 6 Overview
Released on 4th of May, 2018. Mainly Highlighted new features in
Angular 6:
Angular Command Line Interface (CLI)
The Component Development KIT (CDK)
Angular Material package

5. Angular Elements
1. Angular 6 fully supports to the Element Package.
2. Allow to use Angular components outside of Angular
like in JQuery or VueJS apps.
3. Can create Angular components and publish them as
Web Components, which can then be used in any
HTML page.

6. Component Dev Kit (CDK)
1. Released in December of 2017.
2. Can now build your own library of UI components
without using the Angular Material library.
3. Supports Responsive Web Design layouts.
4. CDK includes the @angular/cdk/overlay package.

7. Command Line Interface (CLI)
Equipped with new commands such as,
ng-update - updates dependencies and code.
ng-add - quickly add application features and supports
to turn applications into progressive web apps.
Allows developers to choose the ng-package for
transpiling different libraries using the Bazel tool.

8. Other Features
Web Pack Update.
Web pack module bundler has been updated to version4.
Ivy: New Rendering Engine
Expects to increase the speed and decreases the size of the
application.
RxJS 6.0Angular 6 now used RxJS 6 internally.
Provide an increase in performance, easier to debug AJAX call
stacks and improve modularity as backward compatible as
possible.

9. Earlier
Now
Other Features
Tree Shaking
Angular 6 moved from modules referencing services to
services referencing modules to make the Angular app smaller.

10. Multiple Validators For Your Forms
Angular 6 now allows you to pass multiple
validators to the formBuilder.
No <template> element and now it’s <ng-
tempalate>.
Best Practices!

11. Prerequisites
Install Angular CLI 6.
◦NodeJs
◦Npm
◦Beginner level knowledge on
Angular 2/4/5 and HTML.

12. Template – Driven Form Validation(Demo)

13. Important Angular CLI
Commands
Create a new project.
ng new validation –routing
Create a new folder and include the required files.
ng g c form-template --spec false
ng g c form-reactive --spec false
Create the compare-validator directive in a shared folder.
ng g d shared/compare-validator --spec false
Run the application locally.
ng serve

14. Template – Driven Form Validation(Demo)
Different form states that can be used to validate a form:
$untouched - The field has not been touched yet
$touched - The field has been touched
$pristine - The field has not been modified yet
$dirty - The field has been modified
$invalid - The field content is not valid
$valid - The field content is valid

15. Template – Driven
Form
Validation(Demo)
1. Create a new folder and include the required files.
ng g c form-template --spec false
2. Import BootstrapCDN in styles.css
@import
url(https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/
bootstrap.min.css);
3. Create the compare-validator directive.
ng g d shared/compare-validator --spec false
4. Import forms module to your app module.
import { FormsModule } from '@angular/forms’;
5. HTML page implementation.
6. Configure the app-routings.

16. Reactive Form Validation (Demo)

17. Reactive Form
Validation
(Demo)
1. Create a new folder and include the required
files.
ng g c form-reactive --spec false
2. Import the ReactiveFormsModule to the app
module.
3. Create the Reactive form.
4. Change the template driven form to the
reactive form. <form
[formGroup]="reactiveForm">
5. Modify the validation directive.
6. Apply best practices!

18. Adding Agular Material
& FORM VALIDATIONS WITH MATERIAL

19. Angular Material
UI component library
Help constructing
◦ attractive,
◦ consistent
◦ functional web pages and web applications
Supports modern web design principles like browser
portability, device independence
Create faster, beautiful, and responsive websites.
Inspired by the Google Material Design.

20. What’s new with Angular Material
ANGULAR MATERIAL V6
WAS RELEASED ALONG
SIDE ANGULAR 6.
GOING FORWARD MAJOR
RELEASES WILL BE
ALIGNED WITH ANGULAR.
CDK IS NOW A SEPARATE
LIBRARY
ANGULAR MATERIAL
SCHEMATICS

21. Add Material to
an existing
project (Demo)
Install Angular Material using CDK
◦ This will help you quickly add Material to
a project
◦ Ensure project dependencies in
package.json
◦ Ensure project dependencies in your app
module
◦ Adds Prebuilt or Setup Custom Theme
◦ Adds Roboto fonts to your index.html
◦ Apply simple CSS reset to body
Using starter components

22. Implementing form validations
With Material (Demo)
Placeholders
Hints
Required fields
Error Messages
Validators

23. Final Output

24. Pros & Cons

25. PROS
With Angular Material you get pre-built
components
Seamless updates using Angular CLI
Powerful ecosystem
CONS
Steep learning curve
Documentation is lacking details

26. References
 http://jasonwatmore.com/post/2018/05/11/angular-6-template-driven-forms-
validation-example
 http://jasonwatmore.com/post/2018/05/10/angular-6-reactive-forms-
validation-example
 https://material.angular.io
 https://codingthesmartway.com/angular-material-and-angular-6-material-
design-for-angular/

27. Find the Code
Repository location of Angular 6 form validations
https://github.com/SacheeCG/DevForumAngular6FormVali
dation
Repository location of Angular 6 form validations with
Angular Material.
https://github.com/SacheeCG/DevForumANgular6FormVali
dationwithAngularMaterial

28. Thank you!