Dynamic Nested Forms Angular Explained

in this video you will learn how to create Dynamic nested forms inside [Music] angular you probably know how to create a form inside angular by using reactive forms it is extremely easy to do when your form is simple but what can we do if we have some Dynamic values that we want to insert in form let's say that we want to create a quiz so we have a quiz form where we can add our questions and every single question and have lots of answers how can we Implement such form as you can see here I created a new folder quiz form which is almost empty inside component HTML I have just an empty form inside CSS I have some styling for our form so it is looking better and inside typescript file it is an empty quiz from component so we're starting coding here by injecting reactive forms module to our component now we want to inject inside form Builder which will help us to build a form this is by FB inject and we want to inject here non nullable form Builder and actually most people are using just plain form Builder which is fine but all values of it can be null we can tell it to make properties non-nullable but here is in a better solution we can use this non-nullable form Builder and all Fields won't be nullable and after this let's create our quiz form and here we want to call FB do group because our form is just an object with some fields and here we want to create questions and our questions will be an array this is why this FB array which will create F questions and inside we must provide an empty array because we won't have any data but here is a problem we're hovering on quiz form and here we're getting form group with questions but form array is form control unknown let's first of all talk about naming we have here form group this is just an object with some form controls and form control is just a control of a single field like for example you have an input name it is not just a string it's a form control of type string here we have form array because this is an array of questions of form control unknown which is actually bad and this is completely valid because typescript doesn't really know what data we will throw inside this is why I want to write some typings so our form is correctly typed I'm sorry for Interruption but I just wanted to let you know that only 20% of the people who watch my videos are subscribe to the channel if you really want to continue getting videos and support my channel consider subscribing it helps a lot now let's jump back into the video first of all here we want to create a type form which is a form group you already saw that and inside we can provide that this is an object with questions inside and now our questions is form array and I want to throw inside form question which essentially means inside our questions we want to have an array of form question what is form question let's create it now here form question is just a single question this is why it also will be form group because inside we want to store at least the title of this question and also an array of answers this is why it will be a form group also and inside it will will create two Fields first of all let's create a question name which will be a form control of typ string this is exactly what I said we will bind this to the string input and after this we want our answers and again our answers is in Array this is why form array or form answer and again we don't have form answer but it is nice to have a correct data type for every single thing this is why here let's create a type which is for answer and it is all also a form group and now inside we will create just a single property text which will be form control of type string and here you might say okay why did we create form answer as a form group with text if we have just a single field we could say that this is a stram yes we can but if we're writing it as a form group we can easily add more Fields later if we need to so this is the idea we have our form which is a form group inside we have an array of questions which is our form question and every single form question is a form group with these fields question name and answers question name is just a form control for the string like an input and answers again is a form array just like here but inside we have a form group of text with form control string and it is extremely important to write your data types before you even start working because in this case you are sure that you're implementing correct things this is here we can say that our quiz form is a form and now it is typed not correctly why is that as you can see here we're getting an error the type of property controls are incompatible and here we're getting questions which is form array of form control unknown because we didn't specify here what we're getting in the array but we want to get here form array form question which essentially means to fix it here we must provide that we're getting from question inside and now it is all good and our form is fully covered with data type but this is not all it makes a lot of sense by default to throw inside our form at least a single question so inside browser we see the empty field with a question where we can type something and we can directly add our answers but in order to implement it I want to create an additional function let's name it generate question and what it must do it must create for us a form question this is what why we created all these types they are simplifying our life so what is from question this is a form group with question name and answers this is what we need to return here it will be this FB group and inside an object we first of all create a question name it's just an empty string and we're creating our answers and it is this FB array of type form answer and here inside we're providing an empty array what does it mean this generate question question function creates for us a form group and inside form group we're store in first of all question name which is a string and dances which is an empty array of form answer and this is our form group with text inside as we have here an empty array it does not scream at us and now what we can do here we can throw inside our questions this dot generate question and just call it which actually means by default inside we will have a question now let's TR to render some markup so first of all on our form we want to bind a form group and our form group that we created is our quiz form we also must bind here NG submit and we didn't create yet on submit function so let's edit now inside our component and what I want to do inside this function is simply console log our raw values of the form so this quiz form get your value now let's jump back inside our HTML and in our our form let's first of all render H1 tag that this is a quiz form and after this we want to render a list of our questions and as you remember this is the only field inside our form but the main point is in order to render an array we need a container with this specific key this is why here we must right that we have a div with form array name and inside we must provide questions this is how we're doing that if we need to Rend an array as we have an array of questions we must create a parent form array name with these questions in other case it won't work and now inside we can use F4 to render a list of questions so here is question of questions and we're getting our questions from quiz form dot controls so this is not questions directly DOT questions do controls and you might think why it looks so strange because essential quiz form has lots of properties inside and here we're interested only in controls and as you can see when we're writing here controls we're getting access to an object where inside we have our questions this is why controls questions is exactly what we want questions is our form array of form questions and again it has lots of properties in order to access it as a list we must read here controls as you can see here we're getting form question array this is exactly what we want to Loop through but here I don't don't like this dollar Index because index is too generic I want to create here question index and let's assign here dollar Index now inside our track we can change index to our question index and we need to remove dollar so our for Loop is ready now inside we want to render every single question this is why here div class question but this is not enough because we want to render specific key of the form in order to do that we must say in which group we are this is why here we must write form group name and it must equal question index what does this code means here we inside the loop and inside this specific div we want to render some inputs and bind some keys which are referencing this specific form group in order to do that we are setting form group name and as you can see here it tracks the name of the form group Bor to the directive and now it allows us inside to render an input which is related to this specific question so here will be input with type text and here at last we're writing form control name like we're doing in plain reactive forms and here our name will be question name and additionally I want to write here a placeholder for example question name so once again here inside our typescript file we have a question name as a key but if you don't write here form group name it won't work it won't know from which object it must take this question name this is why this form group name is extremely important this form array name is also extremely important as you can see in browser our quiz form is looking much better we render it here our first question and inside we have a question name and before we start with our answers here on the bottom I want to create a button to submit our form so let's create here a div with a button with type submit and let's write inside submit now here we can type something in the question and hit submit and this is how a response look like so we have an object with questions which is an array inside we have a single object which is our question with the name that I provided inside question name and an empty array of answers the next thing that I want to do is Implement functionality to add new questions this is why here let's create one more div with class add question and inside let's create a button with click event and here we need a function something like add question and the type here will be button and inside our button let's write text add question so our button is there now let's implement this add question and what it must do it must simply generate new question nothing more this is why it returns void and here I want to access our quiz form do controls just like with this inside our markup do questions and as this is an array we can use here push and inside I want to push this generate question which essentially means we're adding this empty question at the end of our array let's check this out here is our question we can click add question and voila our additional question is there we can hit submit and as you can see now we are getting four questions which are obviously empty now let's Implement removing of our questions this is why after our input I want create a span with a click event and we need here a function remove question and inside we want to provide question index because we will remove by the index additionally we need a class remove and I want to put inside a cross now let's implement this function inside our typescript file so we know that inside we're getting our question index which is a number and what we need is from this array we need to remove an item so it will be this qu form controls questions and we have a function remove at where inside we're providing an index in our case it's a question index let's check this out here I'm reloading the page we can see our question we can click cross and our question is removed I can add several questions hit on the question and it will be removed now we need to render a list of answers inside our question this is why here after our pen I want to create a div with form array name why form array name again because we are rendering a list of answers inside our question and here we must say that we're rendering our answers and we need here a class answers and inside this div let's create one more div answers so we know what we're talking about and here will be our for Loop so again we're writing for Loop to get access to every single question and here we want to read our form again do controls do questions do controls and here we want to read a specific question by question Index this is where here we can write add and we're providing our question index inside so this will give us the question but the main problem is that for typescript add can obviously lead to undefined if we don't find an element by Index this is why here we must put a question mark and we want to read here controls which is the controls of our question then again question mark do answers to read all our answers and here we want to read controls of the answers again if you want you could move this code on the top like with form controls question controls or this code here to an additional function to make it more readable but to keep it simple I will leave it here and as you can see now inside controls we're getting an array of form answer now again we have here track dollar Index which I want to the name let's name it answer index and in order to implement it we must create here our answer index and assign inside dollar Index so our follow Loop is ready now inside we want to render every single answer this is why here let's create a if and again we need here a form group so form group name and here we're providing our answer index which is a unique ID and also a class answer just for styling now inside our diff we want at least to render a name input for our answer this is why here input type text also let's create a placeholder answer and here form control name which will be text let's check if it's working I'm reloading the page here we're getting answers but we don't see any answers at all because an array is empty and we didn't create a button to add an answer so after our for loop I want to add a button and let's write here add answer and the type here must be button let's also add a class which will be add answer and we need here our click event which will be add answer and we must provide here a question index so we know to which question we're adding our answer now let's jump to our typescript file and create a function add answer so here we're getting our question index which is a number and this function returns void and by the way here inside remove question we must also say that our function returns void so what we want to do inside our add answer we want to prepare a new answer this is why here let's write new answer which will be of type form answer and here we're calling our this FB group in order to create our answer with text which will be an empty string and after this we must just push this answer inside our array in our question so here again we can use this construction to access the array of our questions and here we're using add question in index to get access to this specific question dot controls do answers do push and here we're pushing inside our new answer that we just created and again add can fail this is why here I would put a question mark after add and after controls and also after answers let's check if it's working now so we see here our add answer button I can click on it and as you can see we're generating new answers inside of a specific question now here I can add one more question and create other answers inside it which actually means we successfully rendered a list of answers and implemented add functionality and the last thing that we are missing is removing of our answer this is why here after our input I want to implement removing of the answer so I want to copy paste this span that we wrote to remove a question put it here inside let's rename it to remove answer and in order to remove an answer we want to know our question index but also our answer index and now let's Implement remove answer functionality so we know that we are get in here our question index which is a number and also our answer index which is also a number and this function return for void now here essentially we want to copy paste this line completely because we're doing exactly the same we're trying to find the question by question index we're getting access to the array of our answers and after this we want to use remove add to remove an item with answer index that we provided inside so we're doing exactly the same how we did it with our questions let's check if it's working I'm reloading the page I adding several answers and I'm hitting here remove and we successfully removed our answer now let's check if we can submit the whole form so here is question one and answer one and answer two and here is our question two with answer one let's hit here submit and check what we got back so here is our object with questions question names are saved there and inside every single object we have our answers and as you can see all text is saved successfully and also if you interested what new stuff we're getting inside angular 17 regarding outputs I highly recommend you to check this video to learn that

Channel: Monsterlessons Academy

Views: 4,035

Keywords: dynamic nested forms angular

Id: ZFAFSB9R2jc

Length: 19min 30sec (1170 seconds)

Published: Tue Apr 09 2024