Create Dynamic Form Control in Angular Reactive Forms | Reactive forms in angular | Angular Tutorial

so far everything is working fine in this reactive form we can add the new book if validations are working fine we can also choose the format based on these radio buttons and we can see the details of that book in this all books page now we got a new requirement that there can be more than one author of this particular book and we do not know the exact number it can be one it can be 2 3 4 it can be n numbers now let's learn how to achieve this kind of functionality in this reactive form we are talking about this authors property and just to give you more details about this one if I go to the models and use this book model over here you will see we are using this author let's say my main requirement is that I want to use authors as an array so there can be more than one author in that particular book now to achieve this kind of functionality in this page let's go back to the ad book reactive component let's go to this component TS file and over here this is the place where we are declaring it so first we have to remove this author so let's just put a comment and let's create one new method so here I'm writing private get author control okay and as of now let's just use the void as a return type and over here I want to create a new author control in the author control we are only having one property and that is name of that author so let's use const author is equals to this dot we can use the same formula that we're using in this main form and over here let's use one group because as often we are having only one but in future we might have more than one properties in this author also for example the first name last name and the address of that author now here we are having only one property let's say it is full name okay and so this is what I have over here in this get author control now let's return it from this place so instead of using that const keyword let's use it return and here let's remove this void and use the form group and from this method we are returning a very basic part of our form now over here I have to create one new property with name authors and here this time let's use this Dot form Builder dot so here comes array in picture because there can be more than one elements in this authors and we do not know what is the exact number so we can use the array and because this is an array so here I can pass more than one elements basically what I just want to tell you is that I can pass the element like this over here so put a comma again just pass it put a comma again just pass it like this just for a moment forget this particular method that we have just created and just talk about this array so in this array we are just passing these elements see now let's say in future if you are having more than one properties then I have to add it couple of more times to avoid this problem it is better to create a separate method like this and just use that method over here in this array it is not always required to create this new method you can also write your code directly in this array let's just use the method that we have just created so here I'm writing this dot get author control now we are done with the changes here in this component file let's make some changes on this HTML file this is the component that we are using for the author over here let's just use one div and let's just paste this code okay now this area belongs to this new property this one so basically so this is just a child for this particular form group although the type of this authors is array but still it is a property of this firm group so here we can use this form array name at this place so what I'm drawing is form array name what is the name of my form array it is authors now this entire area belongs to this firmary name and because the type of this authors is array so there can be more than one control and it is better to create one more div over here just to create the ng4 loop here I am using Ng 4 and in this ng4 let's use let out in authors cool and let's use index insert this authors array we are having couple of form groups and if you are using a child firm group then you have to add the form group name and we can do that easily over here form group name it can be I and because it is just a variable so I can use the square bracket over here and use it like this what is the firm control that we have written over here this is authors and we can update its value with this full name so here I'm just writing full name this is the author's full name let's say here it is and if you notice that I have done the very common mistake in the nd4 loop here I am writing this in ideally we have to write it off over here and if you will see what is this authors let's get one getter property here in the component file for this authors so here I'm creating one just get a property and I can do that over here after this NG on init I am writing public authors the type is form array and let's written some value over here so this dot what is the name of our form it is ADD book form dot get let's pass the name of our control it is authors this one now you will see we are getting one error it is saying that the type abstract control we cannot convert it to the form array so let's just convert it to the form array by using this concept and because this is a getter property so we don't have to write this return type over here we can simply use this public get authors and we can return the value from this place now this authors is returning a form array let's go to this HTML part here we have fixed this off and we are basically looping through all the controls that are available inside this authors so here I am writing controls like this just save all the changes and go back to the browser over here you will see that we are having this authors okay if I am just passing the name and let's see what we have at the bottom side so here you will see we are having this authors property and the type is an array in this array you will see we are having one object it is saying full name author this is the name of the property that we are using in our code and this is the value that we have entered from this place and over here let's insert more than one value so what I'm just doing is I'm just putting a comma and save the changes we are not making any change anywhere else we are just putting one control over here let's go back to the browser and this time you will see we are having two input box for the authors let's pass the data it is first and here I am writing second let's see what we have over here this time in the authors you will see we are having two object first is this full name first and the second one is this full name second okay now I want to add a new button over here and based on the click of that button I want to add new control also if I want to remove something then I need to have one delete button and based on the click of that delete button I want to remove any specific control [Music]

Channel: WebGentle

Views: 4,208

Keywords: create dynamic form controls in angular reactive forms, dynamic form control in angular reactive form, create dynamic form controls in angular, dynamic form angular, dynamic form controls in angular, angular reactive forms dynamically add controls, reactive forms in angular, angular tutorial, reactive forms angular, angular tutorial webgentle, angular tutorial complete, complete angular tutorial, webgentle angular tutorial, reactive forms, Dynamic formcontrol in angular

Id: -8pJcRK1ayI

Length: 8min 18sec (498 seconds)

Published: Mon Sep 26 2022