Styling Form Inputs

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