Angular 2 Forms: Data Binding and Validation

This is the repository for my course, Angular 2 Forms: Data Binding and Validation. The full course is available at LinkedIn Learning.

Course Description

Building HTML forms in the web world is never as straightforward as expected. Collecting user input and implementing dynamic form validation, that automatically reacts to input, can be difficult without the right solution. When building client side apps using Angular you get a good amount of framework code out of the box that makes working with forms a breeze. Angular allows you to easily handle dynamic form validation by taking advantage of two-way data-binding functionality.

This course shows how to build HTML web forms with the Angular forms module, using Angular form building blocks and built-in validation properties and methods. Learn how to use the reactive (model-driven) forms approach to build out a model representation of form data in code and bind it to native HTML form elements. This course also explores how to implement validation, using JavaScript, in case you need more fine tuned control of your interactions.

Instructions

Make sure you have these installed

node.js
git
gulp

Clone this repository into your local machine using the terminal (mac) or Gitbash (PC)

git clone https://github.com/coursefiles/angular2-reactive-forms-data-and-validation.git
CD to the folder

cd angular2-reactive-forms-data-and-validation
Run the following to install the project dependencies:

npm install
Run the npm start command to build the code, watch for file changes, and serve up the site locally:

npm start

The repository has a branch for each video starting point. For example, the branch 02-01b is used as the starting code for the video 02-01 Input type text. You can checkout branches using git checkout <branchname> and not have to re-run npm install each time since you will remain in the same root folder.

Note that the site will run using gulp-webserver and will be served up at the following local address:
http://localhost:8000/

If you use a code editor that launches its own web server please note that it may run on a different port number. You will want to use npm start for this project.

More Stuff

Check out some of my other courses on lynda.com. You can also follow me on twitter, or read my blog.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!