Angular Forms Tutorial - 26 - Dynamic Form Controls

in this video let's see how to add dynamic form controls many a times we have come across forms where we might have to add multiple fields based on a button click for example we might want to provide an alternate address or provide alternate phone numbers or even email addresses we start off with a single input field and leave it up to the user to decide whether they want to add more form fields and fill them out this way you can keep the form concise and expand it only when necessary so let's see how to duplicate a form control in reactive forms for our example I am going to add a button to duplicate the email address field so the user can receive promotional offers on multiple alternate email addresses kind of a strange scenario but it definitely serves a purpose to understand the underlying concept so I'm going to go back to vs code and in AB dot component Diaz the first step is to import the form array class from angular slash forms the form array class makes it possible to maintain a dynamic list of controls so after form group we are also going to import form array the second step is to define a form array in our form model so in the form model right after addresses I am going to add alternate emails which is going to be an array so this dot form builder dot array you can initialize the form array with any number of controls but we want to start with 0 controls hence the empty array third step we create a getter to be able to access this form array easily in the HTML so at the top I'm going to create a new getter get alternate emails which is going to return this dot registration form dot get alternate emails and we are going to type assert it to form array as form array now for the fourth step we are going to create a method that can be called to dynamically insert form controls into the form array so let's call the method add alternate email and within this method we are simply going to push a new form control into the form array this dot alternate emails dot push a new form control this dot F b dot control so every time this method is called a form control is pushed into the form array the fifth step is to add a button in the HTML to call this method so let's go back to AB dot component dot HTML and over here right after the label for email address I'm going to add a button element the text is going to be add email and then type is going to be button class is going to be button button secondary button small with a margin of two now these are all bootstrap classes finally we also add click event listener so on click event we're going to call add alternate email method the final step is to iterate over the form array and display the form fields so let's use the ng for directive to iterate over the array and display the input fields so a div tag with the ng4 directive let email of alternate emails dot controls and then we are also going to access the index let I is equal to index within the for loop we are going to render an input element input type is equal to text class is equal to form control I'm also going to add a bit of vertical margin again from bootstrap and then we need to bind to form control name and we are going to bind the index keep in mind the array is dynamic so we need to make use of the index value to bind to the form control name property also on the div tag which is the containing element we need to add the form array name directive so form array name it's equal to alternate emails this director will help us keep track of the form array values right now if I save both the files and go back to the browser you can see that we have the add email button and one email address field to begin with if I click on the button a new field is added click again one more and so on and when I type in the values you can see that the values are captured in the alternate emails array in the appropriate index position now let me tell you duplicating is not restricted to a single form control you can duplicate an entire form group like an address form group but the steps remain the same import form array define the forum array create a getter create a method to push either a form control or a form group add the form array named directive and finally iterate using the ng for structural directive so that is how you dynamically add form controls or form groups to your reactive forms thank you guys for watching don't forget to subscribe I'll see you guys in the next video

Channel: Codevolution

Views: 82,617

Rating: 4.9283385 out of 5

Keywords: Codevolution, Angular, Angular Forms, Angular Forms Tutorial, Angular Reactive Forms, Reactive Forms, Dynamic Controls, Angular Tutorial, Angular Tutorial for Beginners

Id: 4nJJQMxZkF0

Length: 7min 7sec (427 seconds)

Published: Mon Oct 15 2018