Join Justin Schwartzenberger for an in-depth discussion in this video Series overview: Building an Angular app, part of Angular 2 Forms: Data Binding and Validation.
- [Instructor] So two to three days a week I hit up this sandwich shop for lunch. The place is delicious, but every time I have to fill out this paper order sheet. And they have me using a stubby marker to do so. I mean the sandwiches are too good not to go, but I always leave wishing I had a digital form I could fill out, instead of that old archaic method. Of course building forms in the web world is never as straightforward as we expect it to be. We start out with a basic concept of collecting user data. And the next thing you know, we're trying to figure out how to add complex validation and requirements.
And of course, we find ourselves doing this over and over and over again, each time we build another form. Well when you build client side apps using Angular, you get a good amount of framework code out of the box that makes working with forms a breeze. I will be using TypeScript to write the Angular code, but the majority of that code is based on the ECMAScript 2015 spec, including things like classes, and the Let keyword. There will be a bit of TypeScript specific stuff that makes it easier to do some Angular stuff.
The series starts out with a baseline application in place. The application has a predetermined file and folder structure, along with a build pipeline. The file structure for the app and the patterns of the code within it are based upon the style guide that is available on the official Angular website at the URL below. The baseline application is representative of the app setup you would have when building an app that you plan on taking to production. For this course, the application will start out with a single form component complete with HTML markup and styling already in place.
We will be coming in and applying all the functionality to the form, making use of Angular's form classes and directives to add data collection, feedback and validation.
- Building an Angular form
- Creating a model-driven form
- Using the three fundamental form building blocks: Controls, groups, and arrays
- Handling different input types: Text, checkboxes, selections, and radio input
- Adding change detection to your forms
- Creating custom validations