Check out a free preview of the full Building Awesome Web Apps with Angular 2 course:
The "Validation Styles" Lesson is part of the full, Building Awesome Web Apps with Angular 2 course featured in this preview video. Here's what you'd learn in this lesson:

Adding custom CSS rules, Lukas shows how to modify the visual appearance of form controls when they are valid or not.

Get Unlimited Access Now

Transcript from the "Validation Styles" Lesson

[00:00:00]
>> Lukas Ruebbelke: Angular under the hood will automatically assign some CSS styles to your input, depending on if its valid or invalid. So what this means is we could essentially, well let me just copy this. Let's see what happens. We'll go back here.
>> Lukas Ruebbelke: And the caveats of copying something out of keynote back into.

[00:00:47]
>> Lukas Ruebbelke: Okay?
>> Lukas Ruebbelke: Did I break something?
>> Speaker 2: It didn't look like it evaluated your CSS.
>> Speaker 3: No it didn't.
>> Lukas Ruebbelke: I would wager that I have some random rogue something or another.
>> Lukas Ruebbelke: Some crazy.
>> Lukas Ruebbelke: This may have been a really stupid idea. If this doesn't work in like two seconds.

[00:01:33]
>> Speaker 3: Delete the first line.
>> [INAUDIBLE]
>> Lukas Ruebbelke: What's that?
>> Speaker 3: Delete the first line.
>> Speaker 2: No, that is the first line.
>> Lukas Ruebbelke: That is
>> Lukas Ruebbelke: Let me just make sure it's this indeed.
>> Lukas Ruebbelke: If it is then I'll just do this by hand. Come on.
>> Lukas Ruebbelke: Man keynote.

[00:01:59] What kind of an editor are you?
>> Lukas Ruebbelke: Input.ng-valid. Let's go, I don't know. Border-buttom: solid. What was that?
>> Speaker 4: 1px red.
>> Lukas Ruebbelke: Let's go one pixel-
>> Speaker 4: Red.
>> Lukas Ruebbelke: Not if it's valid bro.
>> Speaker 4: Green.
>> Speaker 2: [LAUGH]
>> Lukas Ruebbelke: Fine, I was just looking for some honey whiffle puff or some crazy color.

[00:02:36] We're talking about yesterday. So let's just see if we've gotten this far.
>> Lukas Ruebbelke: Look at that. So let's go ahead and let's do invalid
>> Lukas Ruebbelke: Peach puff. Why not?
>> Lukas Ruebbelke: I think if anything's gonna really convey the severity of not having Valid.
>> Lukas Ruebbelke: So I don't know if you can see that.

[00:03:25] It's peachy. It's green.
>> Lukas Ruebbelke: And so this is basically happening automatically under the hood, courtesy of Angular. So we can just basically tap into these. So CSS designer, some good to know, but if you're doing any kind of styling that these are going to be applied under the hood.

[00:03:46] When it hits an invallid state or a valid state. Make sense?
>> Lukas Ruebbelke: Okay. And so this covers pretty much everything about forms that I could possibly wanna talk about maybe. I feel like I might've missed one thing, hold on. Nope, that is it.
>> Lukas Ruebbelke: Okay, any questions? ngModel?

[00:04:33] ngForm. Pretty simple. You have this underlying form control that's keeping track of what's happening in the form, not only from values but validation. And from there we can then use that to make educated decisions. So generally what I would do is I'll just ngmodel. I'll bind to that to actually bind to an object in my component, and I'll let that have it, so rarely do I use referenced ngform and then actually use that per se.

[00:05:06] I would just actually bind to an existing object in my controller or my component class. But I will use entry form for validation information. And so that's where things, that's where it becomes really handy is what's the state of my form. And do I need to surface some information based on that?