title: How to get the value of a FormControl in angular2
body: <p>I have the following form with an FormArray containing FormGroups</p>
  
  <pre><code> &lt;form [formGroup]="screenForm" novalidate&gt;
  
    &lt;div formArrayName="iPhoneScreenshots" class="row"&gt;
      &lt;div *ngIf="screenForm.controls.iPhoneScreenshots?.length &gt; 0"&gt;
        {{screenForm.controls.iPhoneScreenshots?.length }}
        &lt;div *ngFor="let url of screenForm.controls.iPhoneScreenshots.controls; let i=index"&gt;
          &lt;div [formGroupName]="i"&gt;
            &lt;input class="form-control" formControlName="url"&gt;
            &lt;img src="{{app.screenshotUrls[i]}}" class="rounded img-fluid app-screen" style="height:200px"/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>the url values come from an array which is getting populated via API
  in the callback I set the values:</p>
  
  <pre><code>private setScreenShots(app: ItunesApp): void {
  if (app.hasOwnProperty('screenshotUrls')) {
    const screenShots = app.screenshotUrls.map(url =&gt; {
        return this.fb.group({
          url: [url, Validators.required]
        });
      }
    );
    const screenShotsArray = this.fb.array(screenShots);
    this.screenForm.setControl('iPhoneScreenshots', screenShotsArray);
   }
  }
  </code></pre>
  
  <p>initial array is empty</p>
  
  <pre><code> private createForm() {
     this.appSiteForm = this.fb.group({
    title: ['', Validators.required]
  });
  
  this.screenForm = this.fb.group({
    iPhoneScreenshots: this.fb.array([]),
  });
  </code></pre>
  
  <p>}</p>
  
  <p>this code line looks very strange to me</p>
  
  <pre><code>img src="{{app.screenshotUrls[i]}}" 
  </code></pre>
  
  <p>I am doing this since url.value() or url.get('value') raises errors.</p>
  
  <p>So how can I access the value of a form control?</p>