[MUSIC]

Something you may notice when writing angular application is that the framework

doesn't attempt to reinvent features that are already present in the modern web

platform.

In this stage, we'll build out our comment form by adding form validation.

Our form is in place, but

we need to add some validation to prevent empty comments from being added.

Let's take a quick look at how the form currently behaves when the form is left

blank and the Submit button is pressed.

As I'm clicking the Submit button, you'll notice that the comment count increases.

And new comment rows are added on the page.

Since both the Name and Comment fields are required,

we need to fix this by adding the required attribute to the input fields.

Let's open up entry-comment-form.component.html.

Find the name input and add the required attribute.

Then find the comment text area and add the required attribute.

Simply by adding the required attribute to the form inputs,

we can leverage the browsers inbuilt form validation features.

Let's take a look at that in the browser.

When I submit the form now without a name or comment,

I get an error bubble beneath the name, telling me that the field is required.

I'll add a name.

And then Submit again.

Now I see there's an error on the Comment field.

The validation messages are coming from the browser and not part of Angular.

Let's add some more rules.

I think it's reasonable to say that names and

comments should be at least three characters in length.

We can use the minLength attribute to enforce these rules.

There's a number of validations that can be done with html input attributes.

I've included a link in the teacher's notes if you're curious to see what

other options are available.

Let's check this out to see how this works in the form.

First, I'll click in the name field and enter two characters.

I won't click in the Comment field, but I'll click the Submit button.

Again, I get an error bubble beneath the name field.

But this time, it says I need to increase the length of the value

to be at least three characters in length.

I'll now enter my full name and press Submit again.

Now the comment fields show they require data.

But it doesn't mention anything about the length.

If we enter a value shorter than three characters, and

then press the Submit button, we will see the minimum length error message instead.

Each browser handle errors differently and

because of this we want to take control of the validation process in our components.

Great work so far.

In the next video, we'll disable the built-in browser validation and

write our own validation messages.