Setting Up a Form Group

Forms in Angular are not much different from standard HTML 0:00 forms that you might be used to. 0:03 They all have the same paths. 0:05 Radio buttons, checkboxes, inputs, text areas, dropdowns, and buttons. 0:07 Let's dive in. 0:11 In our application, the comments are included as part of the entry component. 0:13 This is fine for our use case. 0:18 But, we should not include the comment form as part of the entry component. 0:20 Let's create a separate component for the comment form. 0:25 We'll do this in the entries, 0:28 entry directory, where we'll create two new files. 0:30 entry-comment 0:34 -form.component.ts. 0:38 And then, 0:47 entry-comment-form.component.html. 0:49 We'll be adding this component to the entry components soon enough. 0:58 In entry-comment-form.component.ts 1:04 we'll need to stub out the skeleton of a component. 1:08 Import component. 1:11 From, angular/core. 1:19 Then create a class 1:24 EntryCommentFormComponents. 1:28 It doesn't have any properties yet. 1:36 Using the Component Decorator We'll 1:38 set the selector to app-entry-comment-form, 1:44 And the components.html file. 1:58 Entry-comment-form.component.html. 2:06 Remember to export the class. 2:18 Now, open up the index.ts file in the entries directory, and 2:25 export this new component. 2:30 Remember, we do this to make the component available from the entries directory so 2:51 that the app module doesn't have to dig through the whole directory path. 2:56 If we were to change this directory structure in the future, 3:01 we'd only need to fix it in one place. 3:04 In appmodule.ts, we need to import the EntryCommentFormComponent. 3:06 Then, we need to include it in our declarations array. 3:14 Our new component is ready to use. 3:28 Let's add it to the entry component HTML file so we can start building our format. 3:31 If you're not already running the depth server, go ahead and 3:55 start it now using npm run serv. 3:59 Let's take a look at the browser. 4:01 And if we did everything right, we shouldn't see anything in the console, 4:06 now let's go back to the entry comment form.component.html. 4:11 We can start building our all form here. 4:15 We'll start off like any other HTML form, with the form element. 4:26 We don't need to give it any attributes for now. 4:30 Behind the scenes, Angular with pick up on the form element and 4:33 apply the NG form directive, which is part of the forms module we installed earlier. 4:37 Let's add a names input. 4:43 There is nothing specific to angular here. 4:55 Next, we'll add a text area for incoming message. 4:59 And then a submit button. 5:34 Our fun won't work right now but the basic layout is there. 5:50 You're doing great. 5:56 In the next video we'll connect the form with the code behind the scenes using 5:57 two-way data binding. 6:01