Angular 2 makes creating forms a breeze with its new ngForm, ngModel, and ngModelGroup features. This course walks you through how to set up your forms, validation, and styling.

This Angular 2 course assumes knowledge of some fundamentals.
We have an Angular 2 course that will [Get you started](https://egghead.io/series/angular-2-fundamentals)

ngModel is a very powerful feature of Angular 2, but it isn’t enabled by default. You need to import the Angular 2 `FormsModule` and use the proper syntax around the `ngModel` directive to enable the features (such as automatically updating from an ngModel) that you would expect.

This lesson starts with a Angular 2 hello world app. To quickly set that up [use the angular cli](https://egghead.io/lessons/angular-2-say-hello-world-to-angular-2) which will set up the boilerplate needed to get started.

angular

Create a Basic Angular 2 ngModel Input

Checking the validity of an Angular 2 input using ngModel is simply a matter of getting a reference to the ngModel itself. You get the reference by using the `#ref` syntax, assigning it a name, then `ngModel` will check all of the validity rules for you.

Check ngModel Validation in Angular 2

Angular 2’s ngModel provides error objects for each of the built-in input validators. You can access these errors from a reference to the ngModel itself then build useful messaging around them to display to your users.

Display Validation and Error Messaging in Angular 2

Forms in Angular 2 are essentially wrappers around `input`s that group the input values together into an object and also check that all the inputs are valid. Angular 2 ‘s `ngForm` allows you to get a reference to that object and validity and use them to display information about the form or use the `ngSubmit` event to save information from the form.

Create and Submit an Angular 2 Form using ngForm

The `ngModelGroup` directive allows you to group together related inputs so that you structure the object represented by the form in a useful and predictable way. `ngModelGroup` is often used in combination with `fieldset` as they mostly represent the same idea of “grouping together inputs.”

Group Inputs in Angular 2 Forms with ngModelGroup

Inputs using Angular 2’s `ngModel` automatically apply style classes of `.ng-valid` and `.ng-invalid` each time the input’s validity changes. These classes allow you easily add your own styles simply by declaring the `styles` in your `Component` decorator.

Style Validation in Angular 2 Forms

Angular 2’s `ngModel` exposes more than just validity, it even gives you the states of whether the `input` has been “touched” or changed. This lesson explains and compares those states so you can use them to make complex validity requirements.

Understand the Angular 2 States of Inputs: Pristine and Untouched

Angular 2 forms provide RxJS streams for you to work with the data and validity as it flows out of the forms. These streams allow you handle complex scenarios and asynchronous scenarios with relative ease. This example shows you how to log out the values of the form when the form is valid.

Use RxJS Streams with Angular 2 Forms

Using Radio Buttons in Angular 2 requires a basic understanding of forms as well as how their `label`s will match up with each input. This lesson shows how to use `*ngFor` with radio buttons and covers the quirks of the `id` property and `for` attributes as well as how to style validation of radio buttons.

Create Radio Buttons for Angular 2 Forms

Select Dropdowns in Angular 2 a built with `select` and `option` elements. You use `*ngFor` to loop through your values and create options and use `ngModel` to keep track of the value as it changes.

Learn the Basics of Angular 2 Forms

John Lindquist

Course Content