Learn the Basics of Angular 2 Forms

23 minutes

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.

pro-course-rss-logo

PRO RSS Feed

Create a Basic Angular 2 ngModel Input

Check ngModel Validation in Angular 2

P

Display Validation and Error Messaging in Angular 2

P

Create and Submit an Angular 2 Form using ngForm

P

Group Inputs in Angular 2 Forms with ngModelGroup

P

Style Validation in Angular 2 Forms

P

Understand the Angular 2 States of Inputs: Pristine and Untouched

P

Use RxJS Streams with Angular 2 Forms

P

Create Radio Buttons for Angular 2 Forms

P

Build Select Dropdowns for Angular 2 Forms

P
angular2 tutorial about Create a Basic Angular 2 ngModel Input

Create a Basic Angular 2 ngModel Input

1:39 angular2

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.

angular2 tutorial about Check ngModel Validation in Angular 2

Check ngModel Validation in Angular 2

0:55 angular2 PRO

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.

angular2 tutorial about Display Validation and Error Messaging in Angular 2

Display Validation and Error Messaging in Angular 2

2:59 angular2 PRO

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.

angular2 tutorial about Create and Submit an Angular 2 Form using ngForm

Create and Submit an Angular 2 Form using ngForm

2:42 angular2 PRO

Forms in Angular 2 are essentially wrappers around inputs 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.

angular2 tutorial about Group Inputs in Angular 2 Forms with ngModelGroup

Group Inputs in Angular 2 Forms with ngModelGroup

1:51 angular2 PRO

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.”

angular2 tutorial about Style Validation in Angular 2 Forms

Style Validation in Angular 2 Forms

1:11 angular2 PRO

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.

angular2 tutorial about Understand the Angular 2 States of Inputs: Pristine and Untouched

Understand the Angular 2 States of Inputs: Pristine and Untouched

1:44 angular2 PRO

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.

angular2 tutorial about Use RxJS Streams with Angular 2 Forms

Use RxJS Streams with Angular 2 Forms

3:05 angular2 PRO

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.

angular2 tutorial about Create Radio Buttons for Angular 2 Forms

Create Radio Buttons for Angular 2 Forms

5:48 angular2 PRO

Using Radio Buttons in Angular 2 requires a basic understanding of forms as well as how their labels 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.

angular2 tutorial about Build Select Dropdowns for Angular 2 Forms

Build Select Dropdowns for Angular 2 Forms

1:10 angular2 PRO

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.

Presented by:

John Lindquist

John Lindquist is a co-founder of egghead.io

John has spent the majority of his career developing Rich Web Applications. Before starting egghead.io, John worked at JetBrains as a WebStorm evangelist, and before that he was a Technical Architect at Isobar leading large teams in building the latest and greatest in web apps for the Air Force, HBO, and Bloomberg.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?