title: Handling an array of objects rather than an object with nested objects in angular 2 form
body: <p>I am using angular 2 form to populate and edit information in my app. When it comes to images for the data schema on the backend, it has looked like this:</p>
  
  <pre><code>media {
         featured: "Url string", &lt;!-- designated default image --&gt;
         other: {
                 img1: "Url string", &lt;!-- secondary images --&gt;
                 img2: "Url string",
                 img3: "Url string",
                 img4: "Url string",
                 img5: "Url string",
                 img6: "Url string"
                }
        }
  </code></pre>
  
  <p>However now it has been changed to look like this:</p>
  
  <pre><code>media: [
      {
         thumbs: {
                   default: "Url string",
                 }
         primary: boolean, &lt;!-- whether or not image is the default image --&gt;
         type: string,
         raw: "Url string of image"
      {
  </code></pre>
  
  <p>]</p>
  
  <p>My current form.ts handles the image like this:</p>
  
  <pre><code> let featured = '';
   let img1 = '';
   let img2 = '';
   let img3 = '';
   let img4 = '';
   let img5 = '';
   let img6 = '';
  
  
    if (this.otherMode) {
    const pendingCards = this.pendingCardsComponent.getPendingCard(this.id);
    featured = pendingCards.media.featured;
    img1 = pendingCards.media.other.img1;
    img2 = pendingCards.media.other.img2;
    img3 = pendingCards.media.other.img3;
    img4 = pendingCards.media.other.img4;
    img5 = pendingCards.media.other.img5;
    img6 = pendingCards.media.other.img6;
  
    this.cardForm = new FormGroup({
    'title': new FormControl(cardTitle),
    'media': new FormGroup({
      'featured': new FormControl(featured, Validators.maxLength(300)),
      'other': new FormGroup({
        'img1': new FormControl(img1, Validators.maxLength(300)),
        'img2': new FormControl(img2, Validators.maxLength(300)),
        'img3': new FormControl(img3, Validators.maxLength(300)),
        'img4': new FormControl(img4, Validators.maxLength(300)),
        'img5': new FormControl(img5, Validators.maxLength(300)),
        'img6': new FormControl(img6, Validators.maxLength(300)),
      }),
    }),
  
      private storeCardUrl = 'httpURL';
  
   onSubmit(value: string){
    let formData:Card = this.cardForm.value;
    // let formData: Card[] = this.cardForm.value;
    let body = JSON.stringify(formData);
    let headers = new Headers({'Content-Type': 'application/json'});
    return this.http.post(this.storeCardUrl, body, {headers: headers})
      .map((response: Response) =&gt;  response.json())
      .subscribe(data =&gt; console.log(data))
      // console.log(formData);
   }
  </code></pre>
  
  <p>And the form.html section that handles the image rendering and edit looks like this:</p>
  
  <pre><code> &lt;div formGroupName="media"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12"&gt;
        &lt;div class="form-group"&gt;
        &lt;md-input-container class="mdcontainer"&gt;
          &lt;input
            mdInput placeholder="Card Primary Image"
            type="text"
            id="featured"
            formControlName="featured"
            class="form-control"
            #featured&gt;
        &lt;/md-input-container&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12"&gt;
        &lt;img [src]="featured.value" class="img-responsive"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;!-- Secondary Images  --&gt;
  &lt;div formGroupName="other"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12"&gt;
        &lt;div class="form-group"&gt;
        &lt;md-input-container class="mdcontainer"&gt;
          &lt;input
            mdInput placeholder="Secondary Image 1"
            type="text"
            id="img1"
            formControlName="img1"
            class="form-control"
            #img1&gt;
        &lt;/md-input-container&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12"&gt;
        &lt;img [src]="img1.value" class="img-responsive"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>What I don't understand is handling Media as an array that can still be pulled into my form.html and be able to display the image that I want it to. The old model allowed calling img1/img2/etc. but new model as an array doesn't have any objects outside of the object that contains the Url and other fields. I know that I can create a formArray, with a formGroup and some formControls to get the correct structure but being able to get those images correctly on the html is giving me trouble. </p>
  
  <p>Any help/suggestions/tips would be much appreciated.</p>