title: Set nested form group/control values in reactive forms
body: <p>I have a <code>Reactive Form</code> in my app and the structure is below: </p>
  
  <pre><code>this.bioForm = this._fb.group({
    firstName: [this.user.firstName, [Validators.required]],
  
    experience: this._fb.group({
      field0: ['', [Validators.required, Validators.maxLength(500)]],
      field1: ['', [Validators.required, Validators.maxLength(500)]],
      field2: ['', [Validators.required, Validators.maxLength(500)]],
      field3: ['', [Validators.required, Validators.maxLength(500)]],
      field4: ['', [Validators.maxLength(500)]],
      field5: ['', [Validators.maxLength(500)]]
    }),
  
    skills: this._fb.array([], Validators.required),
  });
  </code></pre>
  
  <p>Within my browser <code>local storage</code> I have the following:</p>
  
  <p><a href="https://i.stack.imgur.com/o6Lal.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o6Lal.png" alt="enter image description here"></a></p>
  
  <p><strong>What I have tried:</strong></p>
  
  <pre><code> // Get Value from LOCAL STORAGE
   let localStorage_experience = JSON.parse(localStorage.getItem("experience")) || "";
  
   // Set nested form controls value
   this.bioForm.setValue({experience:{field0: localStorage_experience.field0 || ""}});
  </code></pre>
  
  <p><strong>I am trying to retrieve value from my local storage and set them against my nested form controls values.</strong></p>