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
Now that our form has some validation rules applied we can check the state of those inputs. In this video we'll look at different aspects of our form's state. We'll learn about dirty checking and how to tell if the user has touched the form.
Right now our form is validated
by using the browser's
0:00
built in form validation methods.
0:03
In order to apply custom validation
messages we'll need to disable the form's
0:05
validation and handle the validation
ourselves when the form is submitted.
0:10
Let's go ahead and open up
the entry-comment-form.component.html.
0:16
Let's add the now Validate
attribute to the form element.
0:21
By adding the no validate attribute
we're letting the browser know
0:28
that we'll be taking care of
the validating of the form and
0:32
to suppress any validation messages
when the form is submitted, now.
0:35
When we submit a form without any
values in the name or comment,
0:41
we'll see the same empty rows being
added to the comment list above.
0:45
To prevent these empty rows from
being added, and invalid data being
0:53
sent to the backend server, We'll need to
check the form state when it's submitted.
0:56
Open up
the EntryCommentFormComponent.ts file.
1:01
In the submit method,
we'll check if our form is valid.
1:05
If it's not valid,
we won't allow the function to execute.
1:10
We'll add a simple check at the top
of the un submit method body.
1:19
Let's see if that prevented
the form from being submitted and
1:27
empty rows being added
to the list of comments.
1:30
Okay, it looks good.
1:33
That solves a part of the problem.
1:34
Now, we need validation messages added
to the form when the form is invalid.
1:36
The quickest way to add
validation messages to our form
1:41
is by hard curtaining
the messages in the template.
1:44
Let's open up the entry
comment form component.html.
1:46
Beneath the name input add a <div> and
1:53
give it the classes alert and
1:59
alert danger, </div>
2:04
The alert and the alert danger
classes aren't specific to angular.
2:15
These are only for styling the div
if it's visible to the user.
2:20
Before we write our custom messages,
we need to create a local variable on
2:24
the input element so that we can check
the state as the user makes changes.
2:28
This local variable can be
used anywhere in the view.
2:37
On the name input field,
we'll add a local variable NameField
2:40
and assign ngModel to the variable.
2:46
With that, we can create our
custom validation messages.
2:54
Inside the alert div, we'll add another
div to indicate the field is required.
2:58
To show this field only when the field
is left blank, we can bind the hidden
3:12
attribute of the div with the expression
that evaluates to a truth value.
3:17
In our case, we'll check if
the field has the required error.
3:22
Because we created the local
variable name field,
3:36
we now have to access to
the errors on the field.
3:40
We put the square brackets around
the hidden attribute which means that this
3:44
will toggle the attribute on when
the expression evaluates to true.
3:49
Save the file and
take a look in the browser.
3:57
Okay, so a validation message shows up
even though we haven't touched the form
4:02
and if we look at the browsers console,
we can see an error has occurred.
4:08
When we added the hidden
attribute on the div
4:14
we were preventing angular
from evaluating the code.
4:16
And since our forms hasn't been touched we
haven't triggered angular form validate's
4:20
yet, which means the arrays
property is null,
4:25
resulting in the exception in the code.
4:29
To avoid this exception we
need to completely hide
4:32
the validation messages from the form,
until we're ready for them to be shown.
4:36
We can use the ngIf directive,
which will add or
4:41
remove elements from the document,
based on some condition.
4:45
In our case, we'll be setting
an expression that retains true only
4:48
if the form is dirty, or has been touched,
and the field has errors.
4:54
Let's at the ngIf directive like this.
4:59
In the ngIf expression,
we'll add nameField.dirty.
5:03
Or nameField.touched.
5:12
And
5:22
nameField.errors.
5:23
Dirty, meaning if the name
filed has changed.
5:32
Touched, if it's been touched by user.
5:36
And, if there's an errors.
5:39
Back in the browser, I'll submit the form
without touching any of the fields.
5:43
The form doesn't get submitted but
5:47
our required validation
method isn't available.
5:49
Let's see if I click in the Name field,
but don't type anything,
5:52
ahen click on Submit.
5:56
When I clicked in the name field and
5:59
then focus left,
I was clicking the submit button.
6:01
The state of the input changed
from untouched to touched.
6:05
We can watch this happen in the browser.
6:09
Let's refresh the page.
6:11
And inspect the name label.
6:15
I don't want to accidentally trigger
the touched event on the name field.
6:20
Once I find the field in div tools, I can
watch the classes of the element change.
6:25
Right now,
the field has the class of ng-untouched.
6:31
If I put my mouse in the field,
nothing changes.
6:38
As soon as I click on the Submit button,
I can see that
6:42
ngunsearched is removed and
is immediately replaced with ngtouched.
6:47
Since I've submitted the form,
6:54
I also want to check the validations on
this message if the form was submitted.
6:56
Inside of our expression,
let's add another all case and
7:02
set it to comment form.submitted Now
7:09
whenever the forum is submitted we can
7:14
trigger our validation messages.
7:19
Let's go ahead and add our messages in.
7:24
Let's create a message for
our minimum length.
7:37
Name must be a minimum
7:44
of three characters, Long.
7:50
On the text area let's use the same error
messages as the name field above but
8:14
use the comment field local variable.
8:20
And let's change all
references to name to comment.
8:39
We should also add the local
variable to the comment text area.
8:49
Cool.
9:05
Now when we submit the form we can see
why the form didn't fully process.
9:13
This is great.
9:18
We've got basic form validation happening.
9:19
Good job.
9:22
In the next video we'll look at styling
the inputs based on their current state.
9:23
See you there.
9:28
You need to sign up for Treehouse in order to download course files.
Sign up