title: how to bind input value to the formcontrol in angular?
body: <p>i have a nested form control(two input box by default but can add more), the values are set from an array of values(loop). These values cannot bind to the form control.</p>
  
  <p><a href="http://plnkr.co/edit/vcs1eCEB9d6bxhONBKZP?p=preview" rel="nofollow noreferrer">plunker</a> </p>
  
  <p>Please have a look at my code below,</p>
  
  <pre><code>&lt;div formArrayName="dayanddescriptions"&gt;
      &lt;div class="panel panel-default" *ngFor="let dayAndDescription of this.createFormService.formGroup.controls.dayanddescriptions.controls; let i = index" &gt;
          &lt;div class="panel-heading"&gt;
              &lt;span&gt;Day {{i + 1}}&lt;/span&gt;
              &lt;span class="glyphicon glyphicon-remove pull-right" *ngIf="i&gt;0"  
                    (click)="removeDayandDescription(i)"&gt;                    
              &lt;/span&gt;
          &lt;/div&gt;          
          &lt;div class="panel-body" [formGroupName]="i"&gt;
              &lt;!--Day--&gt;
              &lt;div class="form-group col-xs-4" &gt;
                  &lt;label for="text"&gt;Day&lt;/label&gt;
                  &lt;input  type="text" class="form-control" formControlName="day"  value="{{i + 1}}" readonly&gt;                    
              &lt;/div&gt;
              &lt;!--Description--&gt;
              &lt;div class="form-group col-xs-4"&gt;
                  &lt;label&gt;Description&lt;/label&gt;
                  &lt;input  type="text" class="form-control" formControlName="description"&gt;
              &lt;/div&gt;                           
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here is my form value in json,</p>
  
  <pre><code>form: { "title": null, "metaDescription": "", "singleImageUploadsImageName": "", "multipleImageUploadsImageName": [], "unDevelopmentGoals": "", "mainEditor": "", "introduction": null, "experiencecategory": "", "dayanddescriptions": [ { "description": "" }, { "description": "" } ], "hashtags": "" }
  </code></pre>
  
  <p>these are the part of its component ,</p>
  
  <pre><code>initDayandDescription() {       
          return this.createFormService._formBuilder.group({
              day: ['', Validators.required],
              description: [''],
          });
      }     
      createForm() {
          this.formService.buildForm(this.createFormService._formBuilder.group({
              title: [null, Validators.compose([Validators.required, Validators.minLength(20), Validators.maxLength(64)])],
              metaDescription: '',
              singleImageUploadsImageName: '',
              multipleImageUploadsImageName: '',
              unDevelopmentGoals: '',
              mainEditor: '',
              introduction: [null, Validators.compose([Validators.required, Validators.minLength(50), Validators.maxLength(124)])],
              experiencecategory: '',
              dayanddescriptions: this.createFormService._formBuilder.array([
                  this.initDayandDescription(),
              ]),           
              hashtags: '',           
          }));
      } 
  </code></pre>