This course will be retired on April 12, 2021.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
HTML5 input attributes are a great way to add logic to your inputs while following a well-defined standard. In this video we'll configure our form's inputs with some conditions we'll later use for validation.
[MUSIC]
0:00
Something you may notice when writing
angular application is that the framework
0:04
doesn't attempt to reinvent features that
are already present in the modern web
0:08
platform.
0:13
In this stage, we'll build out our
comment form by adding form validation.
0:15
Our form is in place, but
0:19
we need to add some validation to
prevent empty comments from being added.
0:21
Let's take a quick look at how the form
currently behaves when the form is left
0:26
blank and the Submit button is pressed.
0:30
As I'm clicking the Submit button, you'll
notice that the comment count increases.
0:37
And new comment rows
are added on the page.
0:44
Since both the Name and
Comment fields are required,
0:46
we need to fix this by adding the required
attribute to the input fields.
0:49
Let's open up
entry-comment-form.component.html.
0:55
Find the name input and
add the required attribute.
1:01
Then find the comment text area and
add the required attribute.
1:07
Simply by adding the required
attribute to the form inputs,
1:16
we can leverage the browsers
inbuilt form validation features.
1:20
Let's take a look at that in the browser.
1:24
When I submit the form now
without a name or comment,
1:29
I get an error bubble beneath the name,
telling me that the field is required.
1:33
I'll add a name.
1:41
And then Submit again.
1:43
Now I see there's an error
on the Comment field.
1:45
The validation messages are coming from
the browser and not part of Angular.
1:48
Let's add some more rules.
1:53
I think it's reasonable
to say that names and
1:55
comments should be at least
three characters in length.
1:57
We can use the minLength
attribute to enforce these rules.
2:01
There's a number of validations that
can be done with html input attributes.
2:14
I've included a link in the teacher's
notes if you're curious to see what
2:18
other options are available.
2:21
Let's check this out to see
how this works in the form.
2:23
First, I'll click in the name field and
enter two characters.
2:26
I won't click in the Comment field,
but I'll click the Submit button.
2:30
Again, I get an error bubble
beneath the name field.
2:35
But this time, it says I need to
increase the length of the value
2:38
to be at least three characters in length.
2:42
I'll now enter my full name and
press Submit again.
2:45
Now the comment fields
show they require data.
2:49
But it doesn't mention
anything about the length.
2:52
If we enter a value shorter
than three characters, and
2:54
then press the Submit button, we will see
the minimum length error message instead.
2:58
Each browser handle errors differently and
3:04
because of this we want to take control of
the validation process in our components.
3:06
Great work so far.
3:11
In the next video, we'll disable
the built-in browser validation and
3:13
write our own validation messages.
3:17
You need to sign up for Treehouse in order to download course files.
Sign up