Create a Basic Angular 2 ngModel Input

Check ngModel Validation in Angular 2

Display Validation and Error Messaging in Angular 2

Create and Submit an Angular 2 Form using ngForm

Group Inputs in Angular 2 Forms with ngModelGroup

Style Validation in Angular 2 Forms

Understand the Angular 2 States of Inputs: Pristine and Untouched

Use RxJS Streams with Angular 2 Forms

Create Radio Buttons for Angular 2 Forms

Build Select Dropdowns for Angular 2 Forms

Learn the Basics of Angular Forms

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

[00:00] To add a password to our form, we must add another input. We'll say the type is password and then the minimal required is saying this is an ngModel, you don't even have to assign it to anything. You do have to give it a name, though. We'll say the name is password.

[00:13] With that information in there, now you'll see when I update the password, it's updating it in the form object, because this form is finding this input with a name of password and saying that password is the value of this here, which is just characters I typed in.

[00:30] If I type in password, you'll see that password shows up here. When I submit as well, you'll see that the object is John, with a password of password. We can group inputs together inside the form. We'll use a field set and wrap out inputs inside of the field set.

[00:47] Tab these in a bit and if we save this as an ngModel group of login, and hit save, we'll now see our object is the root object with a property of login, which has an object of username and password. If I type password again and hit submit, you'll see that submit object has an object for login and that login is an object with a username and password.

[01:12] As you structure out your data and structure out your form, you can use ngModel groups with a property name to help structure out login and password. Then the names of the inputs are going to be the names of the properties inside of that model group.

[01:25] To contrast an input, this is the bare minimum you need, where you need ngModel, the directive on there with a name or pretty much the maximum is an input with a ref to the ngModel, it's own validation, validation rules as well as some default settings for assigning properties into that ngModel.

[01:44] As you build out your forms, you start with the absolute simplest, and then slowly start adding rules, and validators and other visuals to help guide the user.

Course

Learn the Basics of Angular Forms

Group Inputs in Angular 2 Forms with ngModelGroup

Share this video with your friends