Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Create and Submit an Angular 2 Form using ngForm

    John LindquistJohn Lindquist
    2 - 6

    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.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.