Angular Reactive Forms in 10 Minutes

hey there this is Rosie Highsmith at think stir and in this brief video I'm going to show you how to create a reactive form in angular feel free to follow along using the stack blitz link below pausing as often as you need if you want to check out my full course on reactive forms where I cover this more in detail go through hands-on exercises and tackle validation the link for that is below as well now let's move on over to step Blitz as you can see we're going to build an animal shelter volunteer form the user will enter some personal info preferred location what animals they might want to work with in a dynamic amount of references right now we just have some basic code in the template that isn't bound to anything but we do have a skeleton of what's to come the first thing we'll need to do is import reactive forms module in the app module here let's replace forms module which would be used for a basic template driven form and since most logic for the form is written in the component let's head over there we'll be using quite a few classes from angular forms but to start let's import form group will represent our entire form with the form group which is a way to group together controls in a form and it's one of the three angular form building blocks this form group will allow us to track values and status of the form I'll add a member to the class called volunteer form and I'll give it a type of form group we'll need to initialize the volunteer form to hold other controls but first let's import an add form builder as well the form builder service from angular forms is not necessary but it does provide us a syntactic sugar to reduce the amount of code we need to generate controls so we'll also need to inject that into our constructor now let's get started on actually initializing our form I'm going to create a method called initialize form which will call from ng on in it and inside of this we're going to grab our volunteer form and we'll initialize it to a form group that'll contain all the other controls in our form when you initialize a form group it expects an object that contains key value pairs let's start off with just a couple controls for the name and phone number these will be form controls another one of the three angular form building blocks form controls are the most atomic of the building blocks and that's because ultimately all the building blocks can break down into form controls for a simple form control we'll just define a key in a value like so we'll just put an initial name here and then let's also add phone number and set it to an empty string for the Select preferred location drop-down we can also use a form control now for the animals section we're going to create a nested form group since all of these controls are related to do this we'll add a key for the form group we'll call it animals then similar to volunteer form will call the form builder group method and inside of this will create three form controls for dogs cats and reptiles I'm going to set them all to false so that they start unchecked now for the last references control I want the user to be able to add or remove as many Reformer as they want we want to dynamically create controls which is a perfect use case for the final angular building block we'll add another control called references and we'll call the form builder array method this method expects an array and inside of that array we'll create an empty form control using the form builder control method and that's it for initializing the form before we move on I also want to add an on submit so that we can log the form and inspect it when we click the apply button let's also add a getter for references that way we can loop over it in the template and access it and we'll be expecting a return type of a form array this will need to get imported from angular forms so I'll just automatically do that here alright now it's time to bind this new form group to its controls in the template to start off we'll wrap everything but the h1 header in a form tag then we'll add the form Group directive to bind it to our volunteer form now the controls inside the form group also need to be bound to their associated controls with directives for form controls inside of a form group we use the form control named directive so let's add that on the first name that gets bound to the key we defined in the component and we'll do the same thing for phone number and preferred location and you can see that the first name is bound properly as we have that initial name here value okay then for the nested form group of animals we'll use a different directive than the top-level form group because it is nested we'll use form group name and that's set to animals all of its internal form controls will also have the same form control name okay the last field we have to bind is references since this is a form array we'll use the form array named directive we'll give it the references key then since it contains a dynamic number of controls we need to loop over them so let's add an NG four and we'll define each of them as a ref note here that I added a controls off of references and since it's dynamic we can track each item with an index so I'll add that now each input is a form control so I'll property bind it to a form control named directive passing in the index now that we've properly bound the form we still need to add the ng submit event to bind to our new on submit method so let's add that on the form tag just a couple more things in the template the add and remove buttons don't do anything for the references and selecting a location doesn't work yet so let's add a few events let's add a change event and we'll bind it to a method called select location we'll pass in the Dom event so that we can grab the user selection and then down on the remove and add we'll just make sure that we have some click events that bind to new methods and for remove email we actually need to pass in the index that way we can identify which one we've removed and we'll add the add email click Kindler let's head back over to the component to complete these methods let's start with the add and remove email methods for references so let's grab the references form array and to add to the former a will use push and let's just create a new form control let's also add the remove email method remember that this takes in an index and will use the remove app method passing in that index and we can quickly test this out awesome we can add one and we can remove it let's also add the method to select the location this will allow us to programmatically update a form control this takes in an event and to update a form Group partially we'll use the patch value method this requires the key of the control we're going to change and the value that we're going to set it to which is the event target value that the user has selected in the drop-down finally let's update a bit of the form and submit it so we can check out how the form looks in the console and I'll hit apply that should trigger our ng submit event and let me expand this a little bit this form group we see here is actually called the form model when we created an instance of the volunteer form all the values status properties and child controls are tracked through the form model since we bound everything to the template when the user makes a change to the form we'll see an accurate representation through their form model opening up the controls then the phone number we see it also has value status and properties there are so many things we can tap into with reactive forms we've done so much in these past few minutes we've used all of angular forms building blocks form control form group and the dynamic form array to create a form that's bound to the template we've also updated a control programmatically and we can remove and add controls dynamically in the former a great job thanks for joining me in building a reactive form in ten minutes if you'd like to see more content like this check out things there's other angular courses and as I mentioned earlier I also have a full course on intro to reactive forms and angular which covers even more including how to validate the form the link for that course is below hope to see you there you

Channel: Thinkster

Views: 23,715

Keywords: Angular, Thinkster, Learn Angular, Angular Reactive Forms, Reactive Forms, Learn how to make forms reactive

Id: MMP_OcjWNQo

Length: 10min 44sec (644 seconds)

Published: Tue Jun 09 2020