[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