title: patchValue / setValue has not effect on FormGroup
body: <p>I got a <code>FormGroup</code>, containing offers, which looks like this:</p>
  
  <pre><code>{
    2018-01-01: [
      {id: 1},
      {id: 2}
    ],
    2018-01-02: [
    ]
  }
  </code></pre>
  
  <p>So it's <code>FormGroup</code> containing <code>FormArray</code>s which themselve carry more <code>FormGroup</code>s.</p>
  
  <p>Everything is working so far. I save this to my backend and later retrieve that data from there.</p>
  
  <p>However, what's not working is <code>patchValue</code> / <code>setValue</code>:</p>
  
  <pre><code>this._offerService.getFromTo(this.placeId, this._fromDate, this._toDate)
    .subscribe(
      (data) =&gt; {
        this.offers = data;
        if (Object.keys(this.offers).length &gt; 0) {
          this.form.patchValue(data);
          console.log(this.form.value);
        }
      }
    );
  </code></pre>
  
  <p>I've <code>console.log</code>ed the returned value and to me it looks fine. It contains the correct values. However, for some reason <code>console.log(this.form.value);</code> does not show me the updated values from <code>data</code> and I can't see a reason why this might be the case.</p>
  
  <p>Any idea why this might not be working?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I also tried the following as suggested in the comments:</p>
  
  <pre><code>this.offers = data;
  if (Object.keys(this.offers).length &gt; 0) {
    console.log(this.offers);
    for (const k of Object.keys(this.offers)) {
      console.log(this.offers[k]);
      this.form.get(k).patchValue(this.offers[k]);
    }
  </code></pre>
  
  <p>but it's the same.. the form is not getting updated.</p>
  
  <hr>
  
  <p>Here is how the form gets build</p>
  
  <p>The main/parent component creates the <code>form</code> where each item is a <code>FormArray</code>:</p>
  
  <pre><code>  resetCalendarForm() {
      const groups = {};
  
      this.dates.forEach(d =&gt; {
        groups[d] = this._formBuilder.array([]);
      });
  
      if (Object.keys(groups).length &gt; 0) {
        this.form = this._formBuilder.group(groups);
      }
  
      this.formValueChange$ = this.form.valueChanges.subscribe((v) =&gt; {
        this.dirtyChange.emit(this.form.dirty);
      });
  
      // This call is important after resetting in order to propagate the 'dirty' state
      this.form.updateValueAndValidity();
    }
  </code></pre>
  
  <p>The child component gets this <code>FormArray</code> passed down:</p>
  
  <pre class="lang-xml prettyprint-override"><code>  &lt;app-calendar-day *ngFor="let date of dates$ | async" 
                      [formArray]="form.get(date)"&gt;
    &lt;/app-calendar-day&gt;
  </code></pre>
  
  <p>where, as items get selected, the <code>formArray</code> gets expanded by <code>FormGroup</code>s representing the elements:</p>
  
  <pre><code>  onItemSelected(item) {
  
      if (item == null) {
        // Do not insert an element
        return;
      }
  
      const offer = new OfferModel();
      offer.item = item;
      offer.offerDate = this.date;
  
      this.formArray.push(this._formBuilder.group(offer));
      this.formArray.markAsDirty();
  
      this.resetMenuSearch();
    }
  </code></pre>
  
  <hr>
  
  <p>This is the data <em>coming from the server</em> which I'd expect to be reflected by <code>this.form</code> after <code>patchValue</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/AYKr3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AYKr3.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>This is <code>this.form.value</code> (before and unfortunately <em>after</em> <code>patchValue</code>):</p>
  
  <p><a href="https://i.stack.imgur.com/RZBkc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RZBkc.png" alt="enter image description here"></a></p>