How to dynamically add and remove form fields in Angular 2

Question

I m trying to add input fields dynamically while the user clicks the add button and for each form field there must be a remove button  when the user clicks that the form fields must be removed  I need to achieve this using Angular 2  as I m new to Angular 2 please help me to complete it  What I have tried   I have created a set of fields  3 select box and 1 text box   created a button called add fields  but I have tried it in angular 1 x its working fine but in angular 2 I don t know how to complete it  this is link of my full work    app app component ts  import       Component     from   angular core      Component       selector   my-app       template         lt h1 gt   title   lt  h1 gt       lt div class  container  gt       lt button class  btn btn-success bt-sm  gt add lt  button gt       lt form role  form  calss  form-inline  gt       lt div class  form-group col-xs-3  gt       lt label gt Select State  lt  label gt       lt select class  form-control    ngModel    rules State  id  sel1  gt               lt option gt State1 lt  option gt               lt option gt State2 lt  option gt               lt option gt State3 lt  option gt               lt option gt State4 lt  option gt   lt  select gt        lt  div gt       lt div class  form-group col-xs-3  gt   lt label gt Rule  lt  label gt        lt input type  text  data-toggle  modal  data-target   myModal  class  form-                   control  gt       lt  div gt   lt div class  form-group col-xs-3  gt   lt label gt Pass State   lt  label gt       lt select class  form-control    ngModel    rules pass  gt       lt option gt State1 lt  option gt       lt option gt State2 lt  option gt       lt option gt State3 lt  option gt       lt option gt State4 lt  option gt   lt  select gt    lt  div gt    lt div class  form-group col-xs-3  gt       lt label gt Fail State  lt  label gt           lt select class  form-control    ngModel    rules fail  gt           lt option gt State1 lt  option gt           lt option gt State2 lt  option gt           lt option gt State3 lt  option gt        lt option gt State4 lt  option gt        lt  select gt            lt  div gt       lt  form gt        lt  div gt    lt div class  modal fade  id  myModal  role  dialog  gt         lt div class  modal-dialog  gt               lt div class  modal-content  gt                   lt div class  modal-header  gt                        lt button type  button  class  close  data-dismiss  modal  gt  amp times     lt  button gt                       lt h4 class  modal-title  gt Rules Configuration lt  h4 gt                   lt  div gt                   lt div class  modal-body  gt                    lt p gt Rules lt  p gt                   lt  div gt                    lt div class  modal-footer  gt                    lt button type  button  class  btn btn-default  data-  dismiss  modal  gt Close lt  button gt                   lt  div gt                lt  div gt                    lt  div gt                    lt  div gt               export class AppComponent               title    Rule Engine Demo             rules  Rules                       State                        pass                       fail

User · Answer

That is the HTML code  Anyone can use this    lt div class  card-header  gt Contact Information lt  div gt             lt div class  card-body  formArrayName  funds  gt               lt div class  row  gt                 lt div class  col-6   ngFor  let contact of contactFormGroup controls  let i   index   gt                   lt div  formGroupName   i  class  row  gt                     lt div class  form-group col-6  gt                       lt label gt Type of Contact lt  label gt                       lt select class  form-control  formControlName  fundName  type  text  gt                         lt option value  01  gt Balance Fund lt  option gt                         lt option value  02  gt Equity Fund lt  option gt                       lt  select gt                      lt  div gt                     lt div class  form-group col-12  gt                       lt label gt Allocation lt  label gt                       lt input class  form-control  formControlName  allocation  type  number  gt                       lt span class  text-danger   ngIf  getContactsFormGroup i  controls  allocation   touched  amp  amp                       getContactsFormGroup i  controls  allocation   hasError  required    gt                          Allocation   is required   lt  span gt                     lt  div gt                     lt div class  form-group col-12 text-right  gt                       lt button class  btn btn-danger  type  button   click   removeContact i   gt  Remove  lt  button gt                     lt  div gt                   lt  div gt                 lt  div gt               lt  div gt             lt  div gt             lt button class  btn btn-primary m-1  type  button   click   addContact    gt  Add Contact  lt  button gt

User · Answer

addAccordian type  data        console log type  data    let form   this form   if   form controls type       let ownerAccordian   new FormArray        const group   new FormGroup        ownerAccordian push      this applicationService createControlWithGroup data  group         form controls type    ownerAccordian    else     const group   new FormGroup          lt FormArray gt form get type   push      this applicationService createControlWithGroup data  group         console log this form

User · Answer

add and remove text input element dynamically any one can use this this will work                                                                                                           Type of Contact                                                    Balance Fund                           Equity Fund                                                                                                 Allocation                                                                               Allocation   is required                                                                          Remove                                                                                                                Add Contact   userForm  FormGroup    public contactList  FormArray       returns all form groups under contacts   get contactFormGroup         return this userForm get  funds   as FormArray        ngOnInit         this submitUser          constructor public fb  FormBuilder private router  Router private ngZone  NgZone private userApi  ApiService           contact formgroup   createContact    FormGroup       return this fb group         fundName       Validators compose  Validators required        i e Email  Phone       allocation   null  Validators compose  Validators required                       triggered to change validation of value field type   changedFieldType index        let validators   null       validators   Validators compose         Validators required        Validators pattern new RegExp       0-9     0-9    d 0-9  9          pattern for validating international phone number              this getContactsFormGroup index  controls  allocation   setValidators        validators             this getContactsFormGroup index  controls  allocation   updateValueAndValidity              get the formgroup under contacts form array   getContactsFormGroup index   FormGroup          this contactList   this form get  contacts   as FormArray      const formGroup   this contactList controls index  as FormGroup      return formGroup         submitUser         this userForm   this fb group         first name        Validators required          last name              email        Validators required          company name        Validators required          license start date        Validators required          license end date        Validators required          gender    Male          funds  this fb array  this createContact                this contactList   this userForm get  funds   as FormArray        addContact         this contactList push this createContact           removeContact index        this contactList removeAt index

User · Answer

This is a few months late but I thought I d provide my solution based on this here tutorial  The gist of it is that it s a lot easier to manage once you change the way you approach forms   First  use ReactiveFormsModule instead of or in addition to the normal FormsModule  With reactive forms you create your forms in your components services and then plug them into your page instead of your page generating the form itself  It s a bit more code but it s a lot more testable  a lot more flexible  and as far as I can tell the best way to make a lot of non-trivial forms   The end result will look a little like this  conceptually    You have one base FormGroup with whatever FormControl instances you need for the entirety of the form  For example  as in the tutorial I linked to  lets say you want a form where a user can input their name once and then any number of addresses  All of the one-time field inputs would be in this base form group  Inside that FormGroup instance there will be one or more FormArray instances  A FormArray is basically a way to group multiple controls together and iterate over them  You can also put multiple FormGroup instances in your array and use those as essentially  mini-forms  nested within your larger form  By nesting multiple FormGroup and or FormControl instances within a dynamic FormArray  you can control validity and manage the form as one  big  reactive piece made up of several dynamic parts  For example  if you want to check if every single input is valid before allowing the user to submit  the validity of one sub-form will  bubble up  to the top-level form and the entire form becomes invalid  making it easy to manage dynamic inputs  As a FormArray is  essentially  a wrapper around an array interface but for form pieces  you can push  pop  insert  and remove controls at any time without recreating the form or doing complex interactions    In case the tutorial I linked to goes down  here some sample code you can implement yourself  my examples use TypeScript  that illustrate the basic ideas   Base Component code   import   Component  Input  OnInit   from   angular core   import   FormArray  FormBuilder  FormGroup  Validators   from   angular forms     Component     selector   my-form-component     templateUrl     my-form component html     export class MyFormComponent implements OnInit        Input   inputArray  ArrayType        myForm  FormGroup       constructor private fb  FormBuilder         ngOnInit    void           let newForm   this fb group               appearsOnce    InitialValue    Validators required  Validators maxLength 25                 formArray  this fb array                          const arrayControl    lt FormArray gt newForm controls  formArray            this inputArray forEach item   gt                let newGroup   this fb group                   itemPropertyOne    InitialValue    Validators required                    itemPropertyTwo    InitialValue    Validators minLength 5   Validators maxLength 20                                arrayControl push newGroup                        this myForm   newForm            addInput    void           const arrayControl    lt FormArray gt this myForm controls  formArray            let newGroup   this fb group                   Fill this in identically to the one in ngOnInit                         arrayControl push newGroup             delInput index  number   void           const arrayControl    lt FormArray gt this myForm controls  formArray            arrayControl removeAt index             onSubmit    void           console log this myForm value              Your form value is outputted as a JavaScript object             Parse it as JSON or take the values necessary to use as you like           Sub-Component Code   one for each new input field  to keep things clean   import   Component  Input   from   angular core   import   FormGroup   from   angular forms     Component       selector   my-form-sub-component       templateUrl     my-form-sub-component html     export class MyFormSubComponent        Input   myForm  FormGroup     This component is passed a FormGroup from the base component template     Base Component HTML   lt form  formGroup   myForm   ngSubmit   onSubmit    novalidate gt       lt label gt Appears Once  lt  label gt       lt input type  text  formControlName  appearsOnce    gt        lt div formArrayName  formArray  gt           lt div  ngFor  let control of myForm controls  formArray   controls  let i   index  gt               lt button type  button   click   delInput i   gt Delete lt  button gt               lt my-form-sub-component  myForm   myForm controls formArray controls i   gt  lt  my-form-sub-component gt           lt  div gt       lt  div gt       lt button type  button   click   addInput    gt Add lt  button gt       lt button type  submit   disabled    myForm valid  gt Save lt  button gt   lt  form gt    Sub-Component HTML   lt div  formGroup   form  gt       lt label gt Property One   lt  label gt       lt input type  text  formControlName  propertyOne   gt        lt label  gt Property Two   lt  label gt       lt input type  number  formControlName  propertyTwo   gt   lt  div gt    In the above code I basically have a component that represents the base of the form and then each sub-component manages its own FormGroup instance within the FormArray situated inside the base FormGroup  The base template passes along the sub-group to the sub-component and then you can handle validation for the entire form dynamically   Also  this makes it trivial to re-order component by strategically inserting and removing them from the form  It works with  seemingly  any number of inputs as they don t conflict with names  a big downside of template-driven forms as far as I m aware  and you still retain pretty much automatic validation  The only  downside  of this approach is  besides writing a little more code  you do have to relearn how forms work  However  this will open up possibilities for much larger and more dynamic forms as you go on   If you have any questions or want to point out some errors  go ahead  I just typed up the above code based on something I did myself this past week with the names changed and other misc  properties left out  but it should be straightforward  The only major difference between the above code and my own is that I moved all of the form-building to a separate service that s called from the component so it s a bit less messy

[angular] How to dynamically add and remove form fields in Angular 2

Examples related to angular