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

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.

[00:00] I'm going to reuse these locations and convert the radio buttons or just delete the radio buttons and create a select dropdown.

[00:07] So a select requires a name. That'll be the name in our model, and it requires the ng model so that it gets registered to our form, and then the select needs some options.

[00:19] We'll go ahead and create an option, and we'll loop through these with ngFor select location of locations. Each value on this is going to be the current location.

[00:31] Remember, if I did this, that would just be the string location, but since you put the square brackets around it, it evaluates whatever location is.

[00:40] Then inside of the option tag, we'll just do the classic evaluation of location to render that out inside of the option tag. Just to format this a little bit here, so now when I hit save, [inaudible] a dropdown with home away space ocean.

[00:55] When I select one, you can see that the value changes, and just like before, if I want to change the default, you just say ngModel is locations zero, hit save, and now it defaults to home, and I can change that to whatever I want.

Course

Learn the Basics of Angular Forms

Build Select Dropdowns for Angular 2 Forms

Share this video with your friends