Angular Reactive Forms - Handling Multiple Check Boxes | Part-7

hello guys and welcome back to my youtube channel so this is going to be the last video in this angular form tutorial series and the last video we have seen how to create dynamic forms using form arrays and this video is about handling multiple checkboxes so without wasting much time let's go directly into the video so as a disclaimer to this video I just want to mention right over here at the very start of this video is that the way or the process I'm going to use right over here to handle multiple checkboxes is actually not fixed because we are going to use lot of workarounds so there can be more than one ways and I have seen people using different logics or different ways to handle the same situation right over here I'm going to show you one of the most simplest way that I found and which I thought I could explain to you in detail so right over here we have created the favorite fruit controls in our last video but we have commented it out because as I told you that we are going to deal it when we are going to talk about the topic of handling multiple checkboxes so let's first uncomment this one okay so now this favorite fruit control is available but you know that we have multiple fruits over here and on the screen at the stable side we want to display multiple checkboxes so that means it is going to be an array now in the previous video we have seen that we have created the adder of the form group using this adder does grow function for the address section of our form but here these fruits will not be an array of a group because we don't have multiple controls actually each individual item in that array will be a controller itself so it will be an array of form controls so we will create a new method right over here we will call it add fruits controls and what we are going to do inside this method is we are going to create an array of the controls and the number of controls will equal to be the number of fruit elements that are present in this array to which we are going to bind so here I have hard-coded these values this value can actually come from database using a REST API or anything like that but for the simplicity I have just sort Oh drat the values so what we are going to do right over here we are going to create constant array and I'm going to use fruits dot map and the initial value for this control will be false so that the control is not selected by default and then we are going to return the array of form builder that is a for marry and pass this control to these array so this way we will get the form every and right over here I will just replace this a square bracket with the function name that we have created and that is add fruit controls okay so we will have our fruit controls right over here now before binding the fruit controls to HTML just like right over here we created a getter for our address array we need a getter for our fruits array so I'm just going to copy this whole thing and I will name it fruits array and right over here I will change the control name from address to the control what we have and that is I think five fruits so let's just copy this so we have our fruits array get a method ready so now it's time to bind it to over HTML so let me save this type of script file and move back to the HTML path now unless table side you can see that this is particularly the section which is showing us a well check box control so this input or this hold if section is actually going to loop it so so I'm going to call ng for right over here so we are going to loop over the fruit array control so I will copy the getter property name that is fruits array and I will just go ahead and do fruit every dot control okay and here each individual item will be a controller I can give any name but I will prefer to use control and I will also use let I equal to index okay so with this thing ready we are looping this particular section multiple times now to replicate each individual particular item and bind it to over input right over here we are going to actually use a form control property now in any other video of my series of rare platform you have you seen that I have used a form control name property like this so firm control name is actually used or it is available when you are binding to a form group but now this area does not contain any firm group inside it actually it is just an area of the form controls so this form control name property will not work so I'm just going to use a call a property called firm control and I'm going to bind this thing with control that is coming from the array item so this way each individual input will bind to the each individual instance of the control inside the form array of at that particular index so now with form control binded it's time to make certain changes to make the whole thing at working and one of that is this ID property of the check box is actually responsible for providing us a way that which particular check box can be clicked now as the values hard-coded and if we replicate the same ID for multiple controls or the multiple checkboxes then we may not be able to click one of the others form check box so what we are going to do we are just going to dynamically change the value of the ID binding it or appending the I that is the current index of the control to the ID value and similarly this for in the label section actually determines that suppose if we click on this name of the fruit rather than the check box it's still then it is going to make a change event or get our check box click because of this label is actually working as a agent for our input check box with particular ID so we have to make the ID at both the places same ok so this way we are now able to dynamically generate the IDs and for label the only thing is left is that the value so if I currently go back to browser and show you you will get that every control will have the same name that is mango so I'm going to change that by using curly braces syntax fruits and the index I think the fruit is the array name at the type of script file so if I just go back and at the very top section okay at first okay so with this thing I think at least we should have the controls on the screen which are clickable and let's see that whether this thing is working or not so let me save this and get back to our browser and you can see that we have the controls right over here if I click a mango graves strawberry oranges okay great so that means our controls are working now the next important thing over here is that how to retrieve the values of the selected checkboxes because if you go to the type of script file you will see that this particular add fruit controls is actually returning an area of control and its value is true or false because check box by default it can either true or false so if we select the check box it will become true if you do not select a check box it will become false so that is how it behaves now how to retrieve the value of the selected rows so for that we can directly go and check the value property of each and individual controls because in reality we don't want the true false instead we want the name of the selected shoots and that is a normal expected result out of a multiple check box in area so that is actually not direct accessible or anywhere available that you can get the currently selected checkbox value in the property called this particular control door value something in reactive form so for that we are going to create a separate function and let's see how we will retreat that value so here I will declare the instance variable that will actually hold the final values of the selected check boxes so I will name it simply selected fruit values and it will be of every type okay so with this thing declared it's time to create the function to get the values and the function name will be get selected fruit values so the first thing that I'm going to do inside this function is that I'm going to get my selected fruit values array and we initialize it to an empty array so that everything at the start is blind then I'm going to get the access of my fruits array for Mary which I have set a getter method at the top and then inside this I will get the controls property then I will do a for each loop on it and then inside the loop I'm going to use control so each individual item in the farm or the fruits area actually is of type form controls I just use the name control and sorry ears and then gamma and the index I and now what I'm going to check is that if the value of the control is true so just simply control the value if it is true I'm just going to push the current route value at this particular index into the selected fruits value array so selected fruits value dot push and fruits so that is the main area which contain a fruit names and the food at that particular index fantastic so this way we will have the selected fruits in the selected foods value very okay just let's add a space over here great so we will get the value at this moment and to demonstrate you I can simply do console dot log and I will make selected full value and this function is actually going to be binded on the change event of our check box so I will copy this name and let's just get rid of this a space I gotta copy it save it move to the HTML and right away here on the input I will have a change event which will be binded to this method and actually we don't need this valley anymore because the value is going to be true and false based up the control we have bind it away here so this value is not actually going to play any role if you want to keep it you can keep it but you can simply remove it also and let's save this part and get back to a browser so let me open the chrome in spec then I will move to the console tab okay so let me select one of the values you will see that we have the value in the airway similarly any other value okay but no okay good so let's remove one of the values that it grapes and you can see that the new era is only having strawberry oranges so now we are able to get the values now it's time to add validation actually I just want to add a small validation that if no value is selected then a master should be displayed that please select one value or something like that so how we can do that and that is also we are going to do wire workaround and how I will show you so right over here where we are selecting or retrieving the selected values we can actually check the length of the selected values and if there is no value selected that means we can raise an error and obviously with the touch property being tested that we do in the next step but right over here I am going to create one variable to depict the error so right over here at the very top we are creating instance variable I will create one more additional variable and I will name it favorite fruits error which is of type boolean and this is going to be true by default now going to the function that we have created right over here I will just remove this line it's not necessary anymore and we will get fat fruits error and this is going to be selected fruits value dot length and if the length is greater than zero that is we have certain selected values then this error will be false otherwise that will be true so that is all it is a simple logic to set the value of our error variable and with this we can actually display the message on our screen so if you go right over here let's save this copy this name and and HTML I have just commented this line let's uncomment it and I could simply put ng if and pass this variable name and if we get back to the browser right now you can see that we have the error message by default available and if I select any of the value it is not because the function is getting triggered it will compare the length of the selected values and as it is greater than zero it will become false so fine we are getting the error but the problem is that we are getting the error from the very start and we have to add an additional logic for the check of the touch property on the controls so what are we going to do we are again going to create a separate function for that so let's get back to over vs code and I will create a function right over here that the name of jackfruit controls touched and it is going to be very same to what we created right over here at the bottom I will create a simple variable called flag it could be false by default then I will just simply use this for each property or less complete syntax from here to for each and I will follow it you on the control and if control dot - if the test property is true I'm going to set this flag F and G equals r2 and then at the end I'm going to return this FLD flag and that is all this function is going to do so it will check on each control if any of the control tests property is true it will set the flag as to Android on that flag now in addition to the particular error variable which we have binded to the displaymessage we will also bind to this function so I will just use hand and I will just add it right over here so now this will work on the touch property rather than displaying the error message by default from the start so if we get back to the browser and you can see right over here that the error message has gone off it is not displayed by default and I fav perform the check on the controls so I'm not selecting and just moving than the tap and you will see as I checked on the control it becomes available and if I select any value it is again gone if I deselect it is again available okay so we have added a cool validation also now you can have the custom CSS class also you doing ng class with the properties that we have defined and you can do lot of other stuffs and that I need leave to you as an exercise because it is not something necessary I have already told you in one of the previous videos so you can combine the logic from there and create your own custom styling but you can do that we have the test property we have the error property we have the values you can do whatever you want to do now the next thing is that I just want to show you how to combine the values of the selected fruits array with actual form value so that you can post it to back-end so now what we can do in our submit handler function suppose we want to submit the form only when the form is actually valid so what I can do I can simply do if nested form dot valid so this will check for the validity of the other controls but our form area of the multiple check box does not have any validation but we have defined variable that gives whether the particular form where a has ever or not that is flat fruits error so I can use that property and if both of them that is it is valid and there is no error so we will add not operator if the error is false what I can do you can actually post or Ricker's send your value to the back end or do whatever you want but right now we're here I'm just going to log the form value so this particular thing will contain the values for all the controls except the format it because that will be true or false nothing of a use so we have to somehow combine the values from the selected fruit values to this but so I will create a simple variable called constant new item I will name it you can name it anything and I will just replicate the value from the selected fruits so I can simply do it like this and here I'm going to use the spread operator I will just wrap this whole thing in curly braces add three dots in front of it so this will make this particular object of nested form dot value to spread and add a value called new item to it okay with this thing let's save it and get back to our browser and let's try filling out form so let's hit submit and you will see that we have address that is our main control then we have the first name and last name so address you can see that values like this fully expanded and you will see that we have the fruits array but the values true-false true-false it is not much of our use but we have added a new property called new item which actually contain the values of of a selected fruits so now you can pose to this thing back to the server hand side and from there if you want to accept the values you can get the array that is new item you can name it anything I just for simplicity or just for randomly I named it new item you can name it anything so this way you can actually get the values in the same manner we can actually disable the submit button if you want we can just valve the condition that if the form is valid and the array does not have any error that is the fruit array then only enable the submit button so formally I am closing this home series with this video as the last video but if I get certain request that this particular thing needs to be shown or this particular scenario should be included and if I get multiple requests I will try to create additional bonus videos and I will then attach the in this series so this is all for today's video and I hope you guys have liked this video there must be something helpful for you to understand on working with multiple checkboxes and if you guys haven't subscribe to my channel tillie it please please please go hit the subscribe button because there are a lot more coming on angular web development and other programming stuff in coming days on my channel and also hit the bell liken to get the latest updates and I will see you in my next video till then stay healthy stay safe good bye

Channel: Azhar Husain

Views: 38,357

Rating: 4.8518519 out of 5

Keywords: angular multiple check boxes, angular 4 multi check box, angular reactive forms tutorial, angular reactive form validation, angular 2, angular 4, angular 5, angular forms, angular reactive form validation with custom validator, angular forms from scratch, angular form video series, learn angular forms, reactive forms module, forms module in angular, building web form in angular, building forms in angular apps

Id: KTt-X0Q4LPU

Length: 20min 37sec (1237 seconds)

Published: Sat Aug 04 2018