Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Challenge 13: Login" Lesson is part of the full, Building Awesomer Apps with Angular course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students create a Login component and add it to the HomeComponent template.

Get Unlimited Access Now

Transcript from the "Challenge 13: Login" Lesson

[00:00:00]
>> Lukas Ruebbelke: Welcome back, let's talk about Reactive forms. So I need to make an executive decision here.
>> Lukas Ruebbelke: Unfortunately, if you are on master, this component already exist. So I think the easiest thing to do is,
>> Lukas Ruebbelke: I think we just change this slightly to just a different name.

[00:00:28] So we have a newsletter component that exist. So let's think of something comparable like, you know what? Let's do-
>> Speaker 2: [INAUDIBLE] component.
>> Lukas Ruebbelke: We're trying to think of something with very little. So let's do a signup component or a login component, okay? So this is one of these kind of unforeseen things that you just kinda flow and you freestyle and,

[00:01:04]
>> Lukas Ruebbelke: And I'm just making a few changes to the snippets, but where it says name and email, just do username and password. So pretty easy, so we can just adjust for this on the fly.
>> Lukas Ruebbelke: And so let's just take a couple minutes, and the big thing is just pull up the snippets piece.

[00:01:27] And then from there, we're just gonna create a Login in component. And we're going to add it to the HomeComponent template. And so what I'll do is I'll give everybody kind of a little bit of a head start, and then I will do it as well. And we'll kind of go through this, hopefully I'll do it at a pace that everybody can kind of keep up.

[00:01:59]
>> Lukas Ruebbelke: And what we're gonna do is, if you remember talking about template driven-forms and kind of that hierarchy, we're just going to kind of expand upon that. But more so kind of talk about the relationship that we have with how we kind of define our forms. And more so where the actual model, the data model lives that is driving the form.

[00:02:23] So this is going to be a fairly quick extension to the template-driven forms. But it is a very, very useful technique, especially when you start to build out large scale forms. So we're talking, for instance one of my clients, they do insurance forms. So if you're in Canada, you need insurance, you can go, you fill out this form that's pretty complex.

[00:02:55] And to do this strictly from a template design, especially because the form will change dynamically based on what you choose. Trying to do that template driven will be very, very hard. And what you need is a way to declare your form in an imperative context, and then have your template kind of reflect that.

[00:03:17] So I'm not talking about data-driven forms, but being able to define it and declare it in your JavaScript or your TypeScript. And then from there you just hook it into kind of the template. Instead of letting the template drive the model, you let the actual model in this declaration determine how the form is going to work.

[00:03:41] One of the biggest things with this, as well as people that are starting with the pre-challenge, is that if you've ever built out forms, these are some of the most verbose elements and experiences that you can actually code in terms of HTML. So when you have a form that has like an input, that has some requirements with some validation that you need to show the user, different things.

[00:04:03] All of a sudden now your markup becomes very, very large. Even though you're really only doing one thing, if you have four fields, and two possible validations on each, you need to show a message. This can get very large, very complex. And so this is one of the ways that we can kind of start to reduce that.

[00:04:25] And allow our form to be just a form that our model then reacts to.