5.5 Using a `FormBuilder`

Hello folks, in this lesson we're gonna see how we can use a special FormBuilder class to make creating reactive forms less repetitive and manual. FormBuilder isn't required and for our simple feedback form, is not even necessary. But as forms get bigger and have more complex requirements, using a FormBuilder is definitely recommended. So first of all then, we'll need to bring the FormBuilder class into the component. The FormBuilder class also comes from the forms module. So now we'll need to inject the FormBuilder into the constructor. We won't need to use the FormBuilder in the template, so we can mark it as private, and Angular will manage the instance and the property of the class for us, great. So now, instead of creating a form group and individual form controls manually, we can use the FormBuilder. The FormBuilder has a method called group, which we can get from the instance that we injected into the constructor. This method also takes an object literal, and the keys in the object will still refer to form controls. We just don't need to create these form control instances manually. Instead, we can pass empty strings. And these refer to the initial values for the form controls. So, all of the controls will be empty to start with, which is what we want. Let's go back to the browser at this point. And we'll open up the feedback form, and we can see that everything looks exactly the same as it did before. It still looks hideous, but it's working in the same way that it did before. So now, we'll also want to add a button that can be clicked to actually send the feedback, and a way to cancel out and close the form again. So let's add these to the bottom of the template. We can use the disabled binding on the send button and we'll keep it disabled until the form is valid. And notice that we can bind directly from the feedback form from the template here, even though we don't have a template reference variable. And that's useful. We've also added this hide feedback form method to the span to close the form. The problem we have is that the logic to show the form is in the home component. But the button to close the form is in the feedback component. But it's not really a problem. You might guess how we can do it, as we looked at it briefly earlier. We can use a custom event to signal from the form to the home component that it should close the form. We'll need to add the Output and EventEmitter objects to our imports, first of all. And then we need to define the output event using the output decorator. Then we can add the hide feedback form event handler and have it emit our new custom event. Great, so that's nice and simple. So now we can bind to this closedFeedbackForm event in the home components template. So, the event is closedFeedbackForm, which in the left hand side of the expression. And the method that we'll use to handle that event is called hideFeedbackForm. So, we can add this method in the home components class now. We just set the property controlling whether the form is included in the DOM to false. So at this point now, we should be able to both show and hide the feedback form. So the form still looks terrible at this point. Why don't we have some styling for that quickly, just so that we can tidy that up. So we've added a new control, first of all, the text area and that hasn't used anywhere else. But we want this to have pretty much the same styling as a regular input, so in form CSS, let's just add a selector for text areas alongside the selector for inputs. And let's add some positioning and layout styling for the feedback form itself in app.sess. So let's just add it to the bottom. So it's pretty basic stuff that just positions the form under the feedback link as if it were a dropdown menu. We're keeping the styling light to match the site, and I don't want to get into it too deeply as this isn't a CSS tutorial. So, let's just go back and see how the form looks now. So, not too bad. It looks like there's something wrong with the padding on the outer container div. Nice, okay, so it's not the best looking form in the world, but it's tidy and it matches the rest of the site. So, I'm happy enough with that. So in this lesson we saw how to use Angular's FormBuilder to make creating a reactive form easier and less repetitive. We saw that we use the group method of the FormBuilder to create the form group that represents the form. And we passed an object to this, which specifies the controls that we want to create. We used empty strings with our controls so that the controls don't have any initial value. And we saw that we don't have to create instances now of either the form group or form control objects, which is really the main purpose of the FormBuilder. Thanks for watching.