Building Awesomer Apps with Angular Validation Styles

[00:00:00]
>> Lukas Ruebbelke: There are some validation styles that Angular is automatically producing and attaching to an element, if it's valid or not. So the four big ones are ng-valid, ng-invalid, ng-pristine and ng-untouched. So valid, invalid, obviously I think that makes sense. Pristine is, is it in a clean position like is it the way that we found it?

[00:00:27] Untouched is have you ever touched it at all? The reason being is if a form element is empty but a user hasn't touched it, then you would not want to run validation on it. So a lot of times you wanna say if it is untouched, if you're saying should I show this required error?

[00:00:47] A lot of times you'll actually work is this required, so is the form valid? And has the form been touched? Cuz if it hasn't, then don't run validation til they've actually started to work with it, and so that's where that comes in. And so, here you could just say like if it's an invalid state, maybe I wanna put a green border on or something.

[00:01:12] So you can actually attach these in, and control how the element renders based on this valid and invalid state. So this is something Angular is doing under the hood that, it's just happening automatically that you can tap into. In fact, so you can even see in the demo, we go over here, that notice when I take this away because it's saying limitary it's already attaching kind of a style to it.

[00:01:40] And if I go here, we'll see what comes to this. Let me just zoom this in right here. You can see it's automatically added ng-touched, it's dirty and it's invalid. So if I went back, so let me just zoom this back down. Yes, so I think it's this one.

[00:02:09] It's a little bit hard to see but as I start to type this in, you can see now it's valid.
>> Speaker 2: But if you are to refresh the page, it's empty and it's valid but not touched.
>> Lukas Ruebbelke: Right, so it hasn't been touched. [LAUGH] I guess I just, well let's see how this registers.

[00:02:34]
>> Lukas Ruebbelke: So I have touched it and it's now in invalid state. But had I not, so the minute I touched it it's like so there's a bit kind of subsequency you'll play around with depending on your needs.
>> Speaker 3: Does this for the form, complete form or it's only for the control level or form level?

[00:02:51] Control level, right?
>> Lukas Ruebbelke: Yes, so these run, let's see here. So it's on the form level as well, equally interesting.
>> Speaker 3: So it's an R float everything-
>> Lukas Ruebbelke: So you could do the validation so watch, so the minute I touch this form,
>> Lukas Ruebbelke: So that did not change, but this down here,

[00:03:30]
>> Lukas Ruebbelke: Did.
>> Speaker 4: It is changing on the form.
>> Lukas Ruebbelke: Yeah.
>> Speaker 4: So before you
>> Speaker 5: No, it does not change at the form level, on the touching of, it's still engine cached.
>> Speaker 4: But why would it be?
>> Lukas Ruebbelke: Now, so you have to focus south, the menu you focus south.

[00:03:50]
>> Speaker 4: Okay.
>> Lukas Ruebbelke: So we can kind of go down, and we're dancing here, you know what? But a lot of times, so Todd Mato, he has some really good articles on Todd Motto, on reactive forms. And he has a really good post on doing reactive forms. And if you look at the validation section of that, it's a lot of like, if it's invalid and it has been touched, show the error.

[00:04:14] And so that's a pretty good example of like, if this plus this, then show it.
>> Speaker 4: So when you refreshed at the very beginning, the form state is invalid. So it hasn't been,
>> Speaker 4: Where's the form?
>> Speaker 4: Yeah, right there, untouched, pristine, and invalid. So until you make an action on it, it's just saying, it hasn't been validated

[00:04:47]
>> Lukas Ruebbelke: And I would need to actually look at the source code but there is some determination of, if nobody's touched it, this is- It starts as an invalid form cuz it hasn't been filled.