Angular 13 Fundamentals

Angular 13 Fundamentals Template Driven Forms Overview

Learning Paths:
Check out a free preview of the full Angular 13 Fundamentals course:
The "Template Driven Forms Overview" Lesson is part of the full, Angular 13 Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Lukas discusses reactive compared to template-driven forms, importing the FormsModule, and using a local variable to reference the ngModel. Form controls and validation styles are also briefly discussed in the segment.

Get Unlimited Access Now

Transcript from the "Template Driven Forms Overview" Lesson

>> We're gonna talk about template driven forms somebody did ask are we going to talk about reactive forms? This is where I think I tend to diverge against at least what is on the Angular website. In my opinion, in most cases reactive forms actually is an over engineered solution for a problem that in most cases should be solved with a template driven form.

[00:00:37] This is probably one of the few things that I actually agree with ward bell on. That everything that you can do in reactive forms, believe it or not, you can do in template driven forms in a lot less code, and it is a lot more simple. Word actually gives a pretty good talk at mg comp 2020.

[00:01:01] That you can check out, but in my opinion that unless you're using something like formally. That what you get with reactive forms, for what you have to do to make that work and how verbose it is. That I have a hard time justifying that value, especially when I am isolating my mutations into single components.

[00:01:32] So, the difference is I will say this is that when you have a template driven form, I can bind it to a data object directly. When I have a reactive form, what I have to do is I have to pull out the form controller, which exists in template driven forms.

[00:01:51] And I have to essentially piece in every single property, one at a time. And for basic simple forms, that to me just does not make sense. So I'm not going to talk about reactive forms other than I think people adopt them because this is what the angular website says to do.

[00:02:16] But my experience is that for what most people are trying to accomplish. It is a layer of complexity and overhead that can be solved by just isolating your forms into standalone components. And believe it or not, they are built on top of essentially the same underlying forms module.

[00:02:40] So, it's like they took something that worked really well. The forms module, and they just attached or added in a bunch of I think complexity on top of that, and then you have reactive forms. And I do think there's use cases for it, but in most cases, everything that I would use reactive forms for, I can already do in template driven forms.

[00:03:03] So with that said, if you're going to use forms or even reactive forms, you need to import the forms module. So, this is, I've been bitten by this a few times where I'm like, I don't understand why my form's not working. Or if you see something like ngModel is not recognized, the reason why that is probably happening is because you have failed to import your forms module.

[00:03:30] So the big kind of piece of any form is ngModel. So this enables a two way data binding. And what this does is this creates a form control instance from a domain model and then it binds that to the form elements. So one thing that's interesting about forms is that when you have a form, there's a couple things that are happening.

[00:04:00] So you have the data portion of the form, and then you have the state of the form. For instance, is this form in a valid state? Yes or no why is it in a valid state or not in a valid state and so under the hood what Angular does is that they attach a form control even nested form controls to these elements that.

[00:04:26] Essentially maps, the domain model or the data to that element, and then also keeps track whether or not it is valid. And we can create a local variable reference to inside of ngModel to see this. Typically, I don't do this at the ngModel level, but I do do it that the form level.

[00:04:50] So, here using ngModel that I can create a reference called name ref. If I wanted to see it and point this to ngModel, I rarely ever do this. Instead, what I do is I use the top level form control, which is bound to like when it detects a form element.

[00:05:16] It also tracks or attaches not ngMdel but ngControl. So ngModel attaches the FormControl to the element. ngControl is the top level FormControl that tracks again value and validation and then you can also reference this. One thing you can do, I'm not gonna do this here, but you can actually group these together using ngModelGroups.

[00:05:43] So for instance, if you had a form that had like a username or you know user information plus like an address, you could actually segment those into FormGroups, which is a possibility. So, in this case we are referencing ngForm using dollar form ref, and this will keep track of the entire form.

[00:06:06] So what this allows us to do is we can dump this out by tracking the value and the valid properties on this. And I mentioned ngModelGroup that we can kind of group pieces of the form together to create kind of like a substructure if we wanted to. So what this would look like is you'll see here that I'm creating an ngModelGroup of user and then I'm able to nest the first name and the last name into that.

[00:06:40] And one other piece here that I'll discuss is that Angular not only does it attach automatically a form control, but it also attaches validation styles. So If a form is valid, then you have an entry valid style. If it's not entry invalid, so also you have pristine and untouched which is like if somebody hasn't touched a form.

[00:07:10] You might want to track that like hey, you need to fill this out, etc. And so this is where you can do like ngInvalid and valid and with Angular material they kind of style this for you, but if you wanted to override this you could.