Angular provides a number of ways to inform users about the state of the form.

In this video, we'll start the input when the data is valid, but

show the validation message when the user input is invalid.

Right now, our naming comment fields are validating as soon as the values change.

The allot messages are displaying in real time.

When I type in the name field, the dirty flag is triggered and

the alert is shown, even if I've still got focus on the field.

To some users, this can be frustrating and

may even cause them to leave the form and not return.

Depending on what your application is, like if it were a shopping cart for

instance, this could ultimately lead to lost revenue.

Let's turn this down a bit by removing the namefield.dirty and

commentfield.dirty.

Let's take a look at how this works now in the browser.

Now, when I enter text in the name field

the messages are hidden until the input loses focus.

This is better but I also want to indicate to the user when the field is valid

while they're still active.

Just to give them some sense that they can move on to the next field.

To do this I'll add the ng-style directive, which let's me add

the in line styles to the HTML elements, with an expression that returns a value.

I'll be looking to see if the field is 30.

And if it is, and it's valid, then we should highlight the field in green.

In entry commentForm component dot HTML, we'll find the name input.

And add an ngStyle directive, and

wrap it in square brackets.

On the right-hand side of the = sign, we'll add an object.

The keys for

this object are the stamp properties that you'd use in a style sheet.

If there's a hyphen in your property name, you need to wrap it in quotes.

I prefer to always wrap properties in quotes to avoid any confusion later.

We'll be applying the outline color property here.

The expression for the property needs to return a value.

In our case it's going to be green or undefined.

Undefined being the default case.

So let's create itinerary operator that will return either green or undefined.

Now, in the browser I can enter in a value into the name field,

and as soon as I type the third character, I'll see a green outline.

This indicates to me that the field is valid.

If I type backspace for one character the outline returns to it's default blue.

When I leave the field, the validation message is displayed

informing me to add more characters to the field.

Let's update the common fields of behaving the same way.

Let's copy the ngStyle directive from the nameField.

And paste it onto the text area.

Let's modified the nameField variable to comment field.

Now, we can have a green outline.

On the name field and if I move the comment field.

And enter a valid comment.

I get a green outline there and I'm okay to submit the button.

And the comment is added to the comments list.

Cool.

Great job.

You've learned a lot in this course and there's so much more to discover.

Angular's documentation is a great resource for

discovering new directives and module and they provide a lot of tutorials and

cheat sheets to help you get up and running.

Thank you for taking the Angular Basics course.

Be sure to check the teacher's notes for

helpful information to get you started building your own Angular application.