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

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.

[00:00] Now, inputs are almost always wrapped in a form because you're going to want to submit it and handle that data somehow, so let's go ahead and wrap this input and everything inside of a form.

[00:11] Then, after you hit Save you'll notice right away we get an error talking about ngModel, even though ngModel was working before. Now, it warns us that ngModel needs a name attribute, because once I put a name on this, so I'll say the name of this is username. This will help us structure the overall value of the form.

[00:33] If I do a similar reference, I'll say, formRef to an ngForm, and this is basically the same thing as this usernameRef to the ngModel we did before. I'll put this debugging information down here, where I say, formRef.value and show me the adjacent of that.

[00:51] You'll see that I now have a username John on there, and as I delete and change values, this object will update. This object is a representation of the form and all of its inputs, where the form is the root of the object, and then everything nested inside of it, like this name username is represented by that input.

[01:12] You'll also note that a form has an overall validity, so if I say, .valid right now we have this entire object of username John and the form valid true. If I delete everything, username blank, valid false.

[01:24] It goes ahead and inspects every input in there and determines whether the overall form, itself, is valid, which you would use to prevent submitting it or letting the user know they need to change something inside the form.

[01:36] Then to submit the form, instead of using a submit event, which, when I click a Submit button would post and change the URL. We're going to use an ngSubmit event to kind of hijack that process because it's a single page app.

[01:49] I'll say, on submit, and I'll say formRef.value, which is just going to be this value down here. Then, to submit this, we'll just add a submit button inside the form. A button, with a type of submit, we'll just give it a text of submit, and setup our onsubmit event handler.

[02:07] It's going to take in the form value, and we'll log out the form value. You'll see this form value is coming from this on submit formRef.value.

[02:18] When I Save and I type my last name, and hit Enter it has logged out at the bottom here object username, John Lindquist. With this formRef, we're able to get any values off of this form and show them inside the template, but we're also able to pass values off of the form and do things like event handlers to pass the value and validity along to anything we want to do programmatically as well.

Course

Learn the Basics of Angular Forms

Create and Submit an Angular 2 Form using ngForm

Share this video with your friends