Creating a Real-World Angular 2 App: Building a Form

Published November 2017

Learn how to build production-ready Angular 2 applications by building a bug tracking app!

This course continues where Building a Realtime Firebase Database left off - make sure you’ve completed that before beginning.

We’ll continue building Bugged Out, our bug-tracking application. By the end of this course, you’ll have an in-depth understanding of Angular forms and how they’re used in real-world projects.

We’ll start by creating and styling a form, providing users with an interface for manipulating bug tracking data. We’ll show you how to send that data to your database, and validate it en-route. We’ll also look at FormBuilder, create a TypeScript method, and finally show you how to reset the form after a submission.

After you complete this, you can continue building Bugged Out with the next course, Angular 2: Methods, Tables and Listeners.

This is part six of a seven part series. Get the full benefit by completing them in order:

Oh yeah, and the whole SitePoint library! Learn More.

What you'll learn

  • How to create interfaces for data manipulation

  • How to send data to your database from Angular

  • How to validate data before it gets there

  • How to use FormBuilder, create TypeScript methods, and more
Meet your instructor
Jess Rascal

Jess Rascal is a product manager by day, a web and iOS developer the rest of the time that his brain is active.

Lesson 1: Creating a Form in Angular 2
Creating the Bug Detail Form 12:59
Styling the Bug Detail Form 14:56
Creating the Form Model (Reactive Forms/Model Driven Forms) 7:35
Binding the Form Model to the Template 7:52
Submitting the Reactive Form 6:25
Using Validators for Form Validation 7:18
Introduction to Form and FormControl States 9:08
Creating a Custom Validator 17:47
Applying a Custom Validator (Reactive Form / Model Driven Form) 6:18
Applying Validation Styling 7:07
Creating Reactive Forms Using the FormBuilder 6:05
Creating the Add Bug TypeScript Method 6:16
Using the Add Bug TypeScript Method 11:44
Resetting the Form on Submit 5:30
Passing an Existing Bug into the Form 16:46

Leave a Review