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
In this video we'll build on what we learned about form and input state and inform the user when things are good.
Angular Documentation
Angular CLI
- The Angular team has put a lot of thought into how best to build an Angular application. Angular's command line interface is a tool to help you quickly build out components and a testing framework with your application. Many of the concepts presented in this course are implemented in the CLI.
- There are many ways to configure TypeScript to fit your development style. Angular has put together a nice guide describing what each property means and how it relates to developing an Angular application.
Angular Style Guide
Angular Cheat Sheet
Angular GitHub Repository
- It's important to keep your application up to date with the latest version of the framework. Star the application then create an account on larger.io to get notified when there are updates.
Angular provides a number of ways to
inform users about the state of the form.
0:00
In this video, we'll start the input
when the data is valid, but
0:05
show the validation message
when the user input is invalid.
0:10
Right now, our naming comment fields are
validating as soon as the values change.
0:15
The allot messages
are displaying in real time.
0:19
When I type in the name field,
the dirty flag is triggered and
0:23
the alert is shown,
even if I've still got focus on the field.
0:28
To some users, this can be frustrating and
0:33
may even cause them to leave the form and
not return.
0:36
Depending on what your application is,
like if it were a shopping cart for
0:39
instance, this could ultimately
lead to lost revenue.
0:43
Let's turn this down a bit by
removing the namefield.dirty and
0:47
commentfield.dirty.
0:54
Let's take a look at how this
works now in the browser.
0:57
Now, when I enter text in the name field
1:01
the messages are hidden
until the input loses focus.
1:04
This is better but I also want to indicate
to the user when the field is valid
1:08
while they're still active.
1:13
Just to give them some sense that
they can move on to the next field.
1:15
To do this I'll add the ng-style
directive, which let's me add
1:19
the in line styles to the HTML elements,
with an expression that returns a value.
1:24
I'll be looking to see if the field is 30.
1:29
And if it is, and it's valid, then we
should highlight the field in green.
1:32
In entry commentForm component dot HTML,
we'll find the name input.
1:39
And add an ngStyle directive, and
1:53
wrap it in square brackets.
1:57
On the right-hand side of the = sign,
we'll add an object.
2:01
The keys for
2:05
this object are the stamp properties
that you'd use in a style sheet.
2:06
If there's a hyphen in your property name,
you need to wrap it in quotes.
2:10
I prefer to always wrap properties in
quotes to avoid any confusion later.
2:14
We'll be applying the outline
color property here.
2:19
The expression for
the property needs to return a value.
2:25
In our case it's going to be green or
undefined.
2:29
Undefined being the default case.
2:39
So let's create itinerary operator that
will return either green or undefined.
2:44
Now, in the browser I can enter
in a value into the name field,
3:10
and as soon as I type the third character,
I'll see a green outline.
3:15
This indicates to me
that the field is valid.
3:20
If I type backspace for one character
the outline returns to it's default blue.
3:24
When I leave the field,
the validation message is displayed
3:32
informing me to add more
characters to the field.
3:35
Let's update the common fields
of behaving the same way.
3:38
Let's copy the ngStyle
directive from the nameField.
3:42
And paste it onto the text area.
3:56
Let's modified the nameField
variable to comment field.
3:59
Now, we can have a green outline.
4:14
On the name field and
if I move the comment field.
4:19
And enter a valid comment.
4:28
I get a green outline there and
I'm okay to submit the button.
4:30
And the comment is added
to the comments list.
4:35
Cool.
4:39
Great job.
4:40
You've learned a lot in this course and
there's so much more to discover.
4:41
Angular's documentation
is a great resource for
4:45
discovering new directives and module and
they provide a lot of tutorials and
4:47
cheat sheets to help you get up and
running.
4:52
Thank you for
taking the Angular Basics course.
4:54
Be sure to check the teacher's notes for
4:57
helpful information to get you started
building your own Angular application.
4:58
You need to sign up for Treehouse in order to download course files.
Sign up