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