Angular Forms

This course will cover the fundamentals of working with forms in Angular 2. You'll learn how to create forms, style them, and use data binding and validation. You'll be able to post a form to a server, and work with third-party form controls.
Course info
Rating
(255)
Level
Beginner
Updated
Nov 4, 2016
Duration
2h 39m
Table of contents
Course Overview
Introduction
Form Basics in Angular 2
Data Binding in Angular Forms
Form Validation
HTTP Form Posting and Data Access
Third-party Form Controls
Description
Course info
Rating
(255)
Level
Beginner
Updated
Nov 4, 2016
Duration
2h 39m
Description

Forms are a vital part of web applications, since they're the primary way you collect data from your users. You want your forms to look good and offer a simple, smooth experience. In this course, Angular Forms, you'll learn how to create forms using the Angular 2 framework. First, you'll learn how to style them, use data binding and then validate your forms. Next, you'll learn about observable's and posting your forms to a server. Finally, you'll also explore third-party form controls which offer much more functionality than standard HTML. By the end of this course you'll be able to build great looking forms that offer your users a simple way to input any data.

About the author
About the author

Mark started in the developer world over 25 years ago. He began his career with a Bachelor of Science in Computer Science from St. Johns University. After spending 10 years on Wall Street working for Goldman Sachs, Lehman Brothers and other major investment banks, Mark became interested in animation and video game software.

More from the author
JavaScript Fundamentals
Intermediate
3h 0m
Jul 26, 2018
JavaScript: Getting Started
Beginner
2h 46m
Jan 19, 2018
Rapid Angular Training
Intermediate
3h 11m
Oct 6, 2017
More courses by Mark Zamoyta
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello, everyone. My name is Mark Zamoyta, and welcome to my course, Angular 2 Forms. I am a software consultant and developer in the Portland, Oregon area. The information you gather from your web application's users is vital to your company's success. You want to make data collection simple, and provide a great experience for your users. This course on Angular 2 Forms will show you how. Some of the major topics that we will cover include building forms with Bootstrap styling, data binding forms to your application's model, validating form input and handling errors, and posting a form to a server, handling any success or error codes. We'll also look at several third party form controls to help build better forms. By the end of this course, you'll be able to build great-looking forms that offer your users a simple way to input any data. You'll be able to validate and post form data to a server for storage. Before beginning this course, you should be familiar with fundamentals of Angular 2. Two great Pluralsight courses for this are Angular 2: Getting Started and Angular 2: First Look. I hope you'll join me on this journey to learn all about forms with the Angular 2 Forms course at Pluralsight.

Data Binding in Angular Forms
Welcome to this module titled, Data Binding in Angular Forms. My name is Mark Zamoyta. As software developers, we need to be in control of our data. Data binding within a form needs to be understood well, because this data will almost always get posted to a server for storage. Sometimes this data includes highly secure information, such as Social Security Numbers, passwords, or credit card information. So you'll need to understand how data binding is performed before sending you customer's information over the wire. We'll start off this module by seeing the one-way and two-way data binding syntax in Angular 2. This is done with the ngModel directive, which we'll be seeing a lot of in this course. We can bind our data to our own JavaScript or TypeScript object. Usually referred to as a model. Angular will also automatically create its own model for us. And we'll see how we can view it and work with it as well. Next, we'll start up the form project from earlier in this course. And we'll add a new employee model for us to work with. Throughout this course module, we'll see how our employee model compares with Angular's automatically generated model. We'll bind our text fields to our new model, using two-way data binding. Then we'll see how we can call a method on our component during data binding. Calling a method gives us a chance to execute any business logic, data access, or other code as a form gets filled out. We'll see how to bind a checkbox to a Boolean value. We'll bind radio buttons. And we'll bind a select control with options. By the end of this module, you'll understand one-way and two-way data binding in Angular 2. You'll see how forms mostly use two-way data binding and you'll have an option of using your own model to hold data or using Angular's automatically generated model. So let's get started and check out Angular's data binding syntax.

Form Validation
Hello. My name is Mark Zamoyta, and welcome to this module on Form Validation. As a user fills out a form, we need to decide when and how to display error messages. Very often, we'll have required fields in a form, or we'll have more complex rules for a field that require a regular expression to validate. In this module, we'll see how validation works in template-driven forms. We'll also take a look at helping out our users, when possible, by giving them clear error messages at the right time. We'll start this module by looking at CSS Classes that Angular uses for form validation. These classes are placed on fields automatically, as the user fills out a form. These same CSS classes also exist as properties on the ngModel instance. We'll look at how we can access these properties in a template, and create expressions with them, to show and hide error messages. Next, we'll look at styling controls and labels when a field is invalid, or has some other error. We'll use bootstrap classes for this. We'll look at HTML 5 attributes that allow us to validate fields. These include required, minlength, maxlength, and pattern, for regular expressions. Then, we'll look at styling a select control. We'll have to go in-depth to work with selects, and we'll need to bind to blur and change events. We'll see techniques that can be used to validate any control, by using custom functions on a control's events. We'll look at properties placed directly on the ngForm instance, which can be used for form validation. Just as validation properties get placed on fields, these same properties get placed on ngForm. We'll see how to work with these properties at the form level. By the end of this module, you'll be able to detect errors as a user fills out a form. You'll be able to apply styling and classes to labels and fields, in order to give your users a helpful experience. So, let's get started learning about form validation.