Angular 10 Tutorial #70 - Reactive Forms Add Remove FormControl | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners we are continuing to learn about reactive forms and in the last episode i introduce you to the concept of form array we did multiple use cases with form arrays one simple one complicated i hope your concepts about formulae are now clear because today we are going to take it to next level where we will work with nested form arrays we'll try and add remove the elements from form array dynamically this is part 70 of the angular 10 complete tutorial playlist uh there are i've planned around more than 100 plus tutorials for you in this series right now we are on 70th episode the playlist link is in the description box below make sure you check it out following other topics i've covered from ground zero to most advanced trying to cover as many use cases for you so that you can learn and master angular with me if you have any doubts please ask me in the comments section i will try and help you as much as i can make sure that you have gone through all of these tutorials i've put so much effort for you so today we are learning about nested n a quick note for our viewers who are joining us new what are reactive forms reactive forms are a way to create forms in angular application the other way of creating is called template driven forms when we work with reactive forms most of the logic most of the decision making happens in the component rather than in the template when we work with reactive forms we make use of form groups form control form builder and form array we need to import reactive forms module in order to work with reactive forms angular maintains the state information of forms at all times i have covered all of these topics in extreme details in the previous episodes so make sure that you check out the index that i've shown you earlier and make sure that you follow all the tutorials so that you can learn and master reactive forms remember couple of things about reactive forms form control form group from builder form array these are the four things that you would work very closely when you are working with reactive forms to master them please do again refer to the previous episodes i have covered a lot of use cases around these today we are learning about nested form arrays and we'll also do adding new rows to the form dynamically we will also learn how to remove the forms dynamically so like i said form array is an array so you can insert elements you can remove elements so let's we quickly update this here for you so we are learning about form arrays so in the form array we can add any number of elements just like any other just like normal array right just like a normal array and we can since we can add we can also remove elements from the form array all right so we are going to see these two use cases today let's get started all right so this is a form group that we did in the last episode where we added a form group to a form array this formgroup array has a form group which consists of three fields three form controls and this is how it looks so when you refresh we put some values just for reference here i'm going to remove them now and what happens is since it's an array and since we want to work with it it's always a good idea to always create a method which will return it so how are we going to do that let's see that so come down scroll down to here and let's define a new method okay so i'm going to say get users and what is this going to be it's going to return as a form array right and here i'm going to say that return this dot the form name and then i'm going to say dot get users as this is extremely important because a lot of times again people make mistake here because they don't written it as a form array you have to return because you are you are specifying that this method would return data of type form array so you will return form array that's what we are saying and what we are going to do now we are going to use this method and replace this code so whenever we call users it would just give us the value and it would just written as the form array and what is the format take a look again so we got the users and from this form get users and written it as a form array that's all we are saying nothing complicated here now let's add our our new method which will say add line item okay so how are we going to do that let me show you right now so before that let's add a button in our template and i'm going to say button and we are going to assign a method and i'll say add user add new user it can be it can be any functionality that you want now go here we need to define this method so right under this i'm going to say add new user so what is this going to this method going to do all it's going to do is it will return us the users write this method so let's do that i'm going to say let user array equal to this dot what is this going to return me this is going to return me this which is as form array right so then let's define new user equal to which will have three fields that's what we have decided but this remember that this is a form group type so we are going to say this dot fb dot group and we are going to group that value and here we are going to say what is the first one its the name so let's keep it empty h let's keep it empty again if you want to assign some default values you can do that as well so now i'm saying when this method is called what i'm going to do is i'm going to or even better what you can do i'll first show you the raw way and then i'll format it so here you can just say dot get users as form array you can do this also no harm in doing this and then you're simply going to say user array dot push it's an array so i can push the new user object so when i when the user clicks on this method a new row will be created and pushed to this particular array let's see that so now i have here add new row so see now i'm able to add but why not we add something to remove right we need something to remove so how are we going to do that let's do that now so see it's pretty simple straightforward if you if you understand the concept correctly you can do anything because it's just another stupid array so here in the input i'm going to say type equal to [Music] or you can say button for click or whatever i'm going to say button i'm going to say click remove this element now i'm saying remove user dynamically and i'm going to pass i which is the index of this particular instance of this particular user remove and i'm going to say slash button now see we got a remove for each row so let's define this method remove user so just like how we did for add user i'm going to say remove user i'm passing the index now this is again pretty simple like i said it's an array and how do you work with arrays you'll say let's say temporary array and you'll see this dot add form dot get and you'll say users as form array so you see i'm doing kind of repetition of this instead you can use the method that we defined earlier i'll show you that also so here i'm going to say remove at index i that's it all right so add new user now you see dynamically we are getting remove options so i am going to fill in some values so that you see that it's the correct one that is getting removed and see now i'm going to say four five so i'm going to delete the one which is blank only that is getting deleted all the other values are retained now c33333 so i'm going to delete the spaces between those two these two rows and three three will remain so you know that it's the correct one that is getting deleted so this is how any ad or update will work now let's give it some meaning okay let's do some meaningful thing by doing some calculation okay so what i'm going to say when the user enters age i'll populate some department from here okay if it's more than 60 will put them to service department let's say bad example i know but for now idea is to learn okay so here i'm going to say on blur calculate or say assign assign department i again i'm saying that it's a bad example but you get an idea that uh what we are trying to do here is assign a value and call a method so that you get confident that this is how any dynamically generated uh form controls will work right so i'm saying assign department so here again i'm passing the value i here i will go and say assign department we have an eye value that we are passing which is an instance assigned department assign department so far so good now let's quickly throw in some logic uh which would do nothing complicated just assign something so i'm going to say let again not get see it's just an array that you're working so if you are if you're comfortable with arrays you would love this right so what i'm going to do we are going to extract the values right so this has all the values which is nothing but it's an entire form right array is nothing but array has the entire value so i'm going to say let values equal to dot dot value value so this has all the values now and what we are going to do is uh do some operations right do some operation and you know the instance right and here i'm going to say department equal to uh cse again this what this would do is it would just assign that value okay and then i'm going to say this dot users dot set value is the new array so this would update the value this would update the value of the entire array refresh it so now see we can add so i'm saying here i put 60 and here automatically csc is coming right now it would come for all because we are just assigning that but if you want to do some operations you can do that i dot um let's check the value and put that condition so you see this is how you will process the values or any condition based on blur event or anything and clear this and go here and step out and it says zero value okay so what we are going to do uh it's in value i index that we are getting right so here we will say if array dot value of i dot age is greater than 55 assign them as proof assign them as admin else assign them to computer science department right crazy stupid logic but that's not we are not what we are interested in what you should be interested in is that based on certain conditions on this dynamically generated components we are adding the details so now here i'll enter 20 and it says csc but if i enter 55 it says cse because it has to be more than 55 so now it says admin so if i say 60 it will be admin so if i delete i remove so this is how you can dynamically change details and add remove elements now the important thing that remains is what will be the value so what we just saw is add and removing of elements the final thing about form array that we will learn now is when we submit the form what happens right let's do that now so here i'm going to fill in some value or say okay loan type personal loan this is for buying a laptop okay and guaranteer right so we need to some give some guaranteer so let's say raj and i get complaints that i don't use girls names yeah a lot of times um so yeah let me use some of the folks that have written to me hyperthiba hi marina all right so so we got um some users so she knew us all right all right so we got some users here okay sorry for giving that bad ages didn't mean that okay now now we have the entire form which is filled it says the it is still disabled because low name should be okay loan name okay so laptop um by offer some name for the loan name now we fill the entire form but still looks like there is some issue uh why let's see okay why is our ad loan type still disabled and it is still there form status is invalid y uh it is invalid okay let's see what the condition is let me just quickly refresh and see this value here okay it's enabled and was not sure why i'm going to remove this and close it here oh maybe it was stuck in the console lock so that's why it was disabled okay but let's fill it again marina 30 says okay i have to give some values which are more so sorry about that again friends right all right so i have got two advanced now let's go here console clear it now say add loan type and you see the form loan you see loan name loan description loan type in the users we are seeing all the four values that we dynamically added i'm going to remove one and then see what happens to the form when i submit it and i'm going to click here now it says there are three so beautiful so now our form is dynamic we are able to add form control we are able to add validations we are able to check low name is required it should be minimum 10 characters we added dynamically form fields we are able to remove the form fields this completes your form array and reactive forms let me know if you have any questions any doubts these are tricky things you will use them more often in your applications these are there will be so many complex use cases let me know what you want me to cover i'll be more than happy to cover it for you having said that if you like my work tutorials please do consider buying me a coffee at buy me a coffee.com our tutorials in the next episode we will start learning about services in angular we will do a deep dive in observable subscribe a lot of you have written to me saying that you want to learn about rxjs i will cover a bit about that in this along with making you understand how to write better code using rxjs in services very exciting i hope you're liking the series i hope you're learning thank you so much for joining see you see you in the next episode we will learn about services thank you again

Channel: ARC Tutorials

Views: 4,585

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 beginners tutorials, angular 10 tutorials, reactive forms example angular, angular reactive form

Id: Xz1SydcAQMA

Length: 18min 42sec (1122 seconds)

Published: Sat Mar 20 2021