title: Angular2 Dynamically duplicate input fields
body: <p>In this tutorial under the "Dynamically Duplicate Input Elements" Module, In the video #3. She demonstrates how to hide controls with a checkbox. When she clicks on "Send Catalog" is when the Address appears. That's how she hides and shows the address block. She has the [(ngModel)] outside the formarray hence its doing the hide and show toggle thing correctly. The problem I have is that I have to do the toggle affect inside the address block. Lets say when I check the "Work" radio button it only have to display City and State, but when I click the Home it should give me full address. I am trying to achieve some similar affect as the above example I have stated.</p>
  
  <p>The problem I get with it is when I use the [(ngModel)] and *ngif to get the hide/show affect inside the FormArray. When I choose a an option in the DDL It is duplicating exact same thing in all the following blocks of the formgroup. I am not sure how to fix this. Did any of you had the similar problem and were able to fix it? Do you know how I can do the Hide/Show toggle affect without using ([ngModel])?? I have attached an image if you want to see what I was talking about. Thanks in advance!!</p>
  
  <p>component.html</p>
  
  <pre><code> &lt;div formArrayName="Disciplines" *ngFor="let discipline of Disciplines.controls; let i=index"&gt;
                  &lt;div [formGroupName]="i"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="col-md-2 control-label"&gt;Discipline&lt;/label&gt;
                          &lt;div class="col-md-3"&gt;
                              &lt;label class="control-label" id="fireId" name="agencyProfile-label-fireId" attr.for="{{fireId + i}}"&gt;
                                  &lt;input id="{{fireId + i}}" name="Fire"
                                         type="checkbox" formControlName="Fire"&gt;
                                  Fire
                              &lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-3"&gt;
                              &lt;label class="control-label" id="medicalId" name="agencyProfile-label-medicalId" attr.for="{{medicalId + i}}"&gt;
                                  &lt;input id="{{medicalId + i}}" name="Medical"
                                         type="checkbox" formControlName="Medical"&gt;
                                  Medical
                              &lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-3"&gt;
                              &lt;label class="control-label" id="policeId" name="agencyProfile-label-policeId" attr.for="{{policeId + i}}"&gt;
                                  &lt;input id="{{policeId + i}}" name="Police"
                                         type="checkbox" formControlName="Police"&gt;
                                  Police
                              &lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;!--&lt;div *ngIf="agency.Fire || agency.Medical || agency.Police"&gt;--&gt;
                          &lt;div class="form-group"&gt;
                              &lt;div class="col-md-12"&gt;
                                  &lt;label class="col-md-2 control-label" id="contractTermsId" name="agencyProfile-label-contractTermsId" attr.for="{{contractTermsId + i}}"&gt;Contract Terms&lt;/label&gt;
                                  &lt;div class="col-md-6"&gt;
                                      &lt;select class="form-control" id="{{contractTermsId + i}}" name="agencyProfile-drodown-contractTermsId" formControlName="ContractTermId" [(ngModel)]="agency.ContractTerms"&gt;
                                          &lt;option *ngFor="let d of contract" [value]="d.ContractTermId"&gt;{{d.ContractTerms}}&lt;/option&gt;
                                      &lt;/select&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div *ngIf="agency.ContractTerms == 1"&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;div class="col-md-12"&gt;
                                      &lt;label class="col-md-2 control-label" attr.for="{{FirstEndDateId + i}}" id="FirstEndDateId" name="agencyProfile-label-FirstEndDate"&gt;First EndDate&lt;span class="compulsary"&gt;*&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
                                      &lt;div class="col-md-4"&gt;
                                          &lt;input type="date" id="{{FirstEndDateId + i}}" formControlName="FirstEndDate" /&gt;
                                          &lt;!--&lt;my-date-picker id="renewalDateTextId" name="agencyProfile-datepicker-renewalDateTextId" [options]="myDatePickerOptions"
                              formControlName="RenewalDate"&gt;&lt;/my-date-picker&gt;--&gt;
                                      &lt;/div&gt;
                                      &lt;label class="col-md-1 control-label" attr.for="{{secondEndDateId + i}}" id="secondEndDateId" name="agencyProfile-label-secondEndDateId"&gt;Second EndDate&lt;span class="compulsary"&gt;*&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
                                      &lt;div class="col-md-4"&gt;
                                          &lt;input type="date" id="{{secondEndDateId + i}}" formControlName="SecondEndDate" /&gt;
                                          &lt;!--&lt;my-date-picker id="renewalDateTextId" name="agencyProfile-datepicker-renewalDateTextId" [options]="myDatePickerOptions"
                              formControlName="RenewalDate"&gt;&lt;/my-date-picker&gt;--&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div *ngIf="agency.ContractTerms == 2"&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;div class="col-md-12"&gt;
                                      &lt;label class="col-md-2 control-label" attr.for="{{startDateId + i}}" id="startDateId" name="agencyProfile-label-startDateId"&gt;Start Date&lt;span class="compulsary"&gt;*&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
                                      &lt;div class="col-md-4"&gt;
                                          &lt;input type="date" id="{{startDateId + i}}" formControlName="StartDate" /&gt;
                                          &lt;!--&lt;my-date-picker id="renewalDateTextId" name="agencyProfile-datepicker-renewalDateTextId" [options]="myDatePickerOptions"
                              formControlName="RenewalDate"&gt;&lt;/my-date-picker&gt;--&gt;
                                      &lt;/div&gt;
                                      &lt;label class="col-md-1 control-label" attr.for="{{endDateId + i}}" id="endDateId" name="agencyProfile-label-endDateId"&gt;End Date&lt;span class="compulsary"&gt;*&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
                                      &lt;div class="col-md-4"&gt;
                                          &lt;input type="date" id="{{endDateId + i}}" formControlName="EndDate" /&gt;
                                          &lt;!--&lt;my-date-picker id="renewalDateTextId" name="agencyProfile-datepicker-renewalDateTextId" [options]="myDatePickerOptions"
                              formControlName="RenewalDate"&gt;&lt;/my-date-picker&gt;--&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;div class="col-md-12"&gt;
                                  &lt;label class="col-md-2 control-label" attr.for="{{renewalDateId + i}}" id="renewalDateId" name="agencyProfile-label-renewalDateId"&gt;Renewal Date&lt;span class="compulsary"&gt;*&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
                                  &lt;div class="col-md-2"&gt;
                                      &lt;input type="date" id="{{renewalDateId + i}}" formControlName="RenewalDate" /&gt;
                                      &lt;!--&lt;my-date-picker id="renewalDateTextId" name="agencyProfile-datepicker-renewalDateTextId" [options]="myDatePickerOptions"
                          formControlName="RenewalDate"&gt;&lt;/my-date-picker&gt;--&gt;
                                  &lt;/div&gt;
                                  &lt;label class="col-md-1 control-label" attr.for="{{followupDateId + i}}"&gt;FollowUp Date&lt;span class="compulsary"&gt;*&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
                                  &lt;div class="col-md-2 "&gt;
                                      &lt;input type="date" id="{{followupDateId + i}}" formControlName="FollowupDate" /&gt;
                                      &lt;!--&lt;my-date-picker name="followupDate" [options]="myDatePickerOptions"
                          formControlName="FollowupDate"&gt;&lt;/my-date-picker&gt;--&gt;
                                  &lt;/div&gt;
                                  &lt;label class="col-md-1 control-label" attr.for="{{checklistDateSentId + i}}"&gt;CheckList Date Sent&lt;/label&gt;&lt;br&gt;
                                  &lt;div class="col-md-2"&gt;
                                      &lt;input type="date" id="{{checklistDateSentId + i}}" formControlName="CheckListDateSent" /&gt;
                                      &lt;!--&lt;my-date-picker name="primerDate" [options]="myDatePickerOptions"
                          formControlName="PrimerDate"&gt;&lt;/my-date-picker&gt;--&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;!--&lt;/div&gt;--&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-2"&gt;
                      &lt;button class="col-md-12 btn btn-primary"
                              name="agencyProfileTab-button-searchUserProfileId"
                              (click)="addDisciplines()"
                              type="button"&gt;
                          Add Discipline
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>component.ts</p>
  
  <pre><code>import { Component, OnInit, AfterViewInit, OnDestroy, ViewChildren, ElementRef} from '@angular/core';
  import { FormBuilder, FormGroup, FormControl, FormArray, Validators, FormControlName } from '@angular/forms';
  import { ActivatedRoute, Router } from '@angular/router';
  
  import 'rxjs/add/operator/debounceTime';
  import 'rxjs/add/observable/fromEvent';
  import 'rxjs/add/observable/merge';
  import { Observable } from 'rxjs/Observable';
  import { Subscription } from 'rxjs/Subscription';
  import { IAgencyStatus } from './iagencystatus';
  @Component({
      moduleId: module.id,
      templateUrl: 'agencyprofile.component.html'
  })
  
  export class AgencyProfileComponent implements OnInit, AfterViewInit, OnDestroy {
      @ViewChildren(FormControlName, { read: ElementRef }) formInputElements: ElementRef[];
  
          agency: IAgencyProfile;
  
      get Disciplines(): FormArray {
              return &lt;FormArray&gt;this.agencyForm.get('Disciplines');
          }
       ngOnInit(): void {
              this.Form = this.fb.group({
                  Disciplines: this.fb.array([this.buildDisciplines()]),
      }
  
       addDisciplines(): void {
              this.Disciplines.push(this.buildDisciplines());
          }
       buildDisciplines(): FormGroup {
              return this.fb.group({
                  ContractTerms: '',
                  ContractTermId: 0,
                  StartDate: null,
                  EndDate: null,
                  FirstEndDate: null,
                  SecondEndDate: null,
                  Fire: false,
                  Medical: false,
                  Police: false,
                  FollowupDate: null,
                  RenewalDate: null,
                  CheckListDateSent: null
              });
          }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/eoR8m.png" rel="nofollow noreferrer">Picture for the above html form</a>
  In the above image I have select Fire for the 1st block and clicked "Add Discipline". The same selection has been done to the next block automatically! Let me know if you have any more questions</p>