The alert and the alert danger classes aren't specific to angular.

These are only for styling the div if it's visible to the user.

Before we write our custom messages, we need to create a local variable on

the input element so that we can check the state as the user makes changes.

This local variable can be used anywhere in the view.

On the name input field, we'll add a local variable NameField

and assign ngModel to the variable.

With that, we can create our custom validation messages.

Inside the alert div, we'll add another div to indicate the field is required.

To show this field only when the field is left blank, we can bind the hidden

attribute of the div with the expression that evaluates to a truth value.

In our case, we'll check if the field has the required error.

Because we created the local variable name field,

we now have to access to the errors on the field.

We put the square brackets around the hidden attribute which means that this

will toggle the attribute on when the expression evaluates to true.

Save the file and take a look in the browser.

Okay, so a validation message shows up even though we haven't touched the form

and if we look at the browsers console, we can see an error has occurred.

When we added the hidden attribute on the div

we were preventing angular from evaluating the code.

And since our forms hasn't been touched we haven't triggered angular form validate's

yet, which means the arrays property is null,

resulting in the exception in the code.

To avoid this exception we need to completely hide

the validation messages from the form, until we're ready for them to be shown.

We can use the ngIf directive, which will add or

remove elements from the document, based on some condition.

In our case, we'll be setting an expression that retains true only

if the form is dirty, or has been touched, and the field has errors.

Let's at the ngIf directive like this.

In the ngIf expression, we'll add nameField.dirty.

Or nameField.touched.

And

nameField.errors.

Dirty, meaning if the name filed has changed.

Touched, if it's been touched by user.

And, if there's an errors.

Back in the browser, I'll submit the form without touching any of the fields.

The form doesn't get submitted but

our required validation method isn't available.

Let's see if I click in the Name field, but don't type anything,

ahen click on Submit.

When I clicked in the name field and

then focus left, I was clicking the submit button.

The state of the input changed from untouched to touched.

We can watch this happen in the browser.

Let's refresh the page.

And inspect the name label.

I don't want to accidentally trigger the touched event on the name field.

Once I find the field in div tools, I can watch the classes of the element change.

Right now, the field has the class of ng-untouched.

If I put my mouse in the field, nothing changes.

As soon as I click on the Submit button, I can see that

ngunsearched is removed and is immediately replaced with ngtouched.

Since I've submitted the form,

I also want to check the validations on this message if the form was submitted.

Inside of our expression, let's add another all case and

set it to comment form.submitted Now

whenever the forum is submitted we can

trigger our validation messages.

Let's go ahead and add our messages in.

Let's create a message for our minimum length.

Name must be a minimum

of three characters, Long.

On the text area let's use the same error messages as the name field above but

use the comment field local variable.

And let's change all references to name to comment.

We should also add the local variable to the comment text area.

Cool.

Now when we submit the form we can see why the form didn't fully process.

This is great.

We've got basic form validation happening.

Good job.

In the next video we'll look at styling the inputs based on their current state.

See you there.