title: Angular Reactive Form : How to preset values ? (FormArray containing objects)
body: <p>I'm trying to implement a classical &quot;Update Object&quot; feature.</p>
  <p>I have a table with all my products listed, each line has an edit button opening a modal where I want to show product property values.</p>
  <p>The property we focus on here is 'personas' and its value is an array of objects, each selected from a dropdown.</p>
  <p><a href="https://i.stack.imgur.com/OPUC9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OPUC9.png" alt="The form I'd like to prefill" /></a></p>
  <p>I managed to show the right number of objects (3 in that example), but the values just don't set and the default option is selected in each case.</p>
  <p>I tried to use angular 'patchValue()' function without success on that property.</p>
  <p>Here is what I have as Typescript :</p>
  <pre><code>public personas = new FormArray([], [], []);
  
  constructor(private fb: FormBuilder, public productService: ProductService) {
    this.productForm = this.fb.group({
        personas: this.personas,
      });
  }
  
  public onEdit(product: Product): void {
      if (product.personas.length &gt; 0) {
       this.personaService.personas$.pipe(takeUntil(this._destroyed$)).subscribe((personas: Persona[]) =&gt; {
          const array = product.personas.filter(p =&gt; personas.some(p2 =&gt; p.id === p2.id));
          this.personas = this.fb.array(array.map(persona =&gt; new FormControl({
            id: persona.id,
            persona: persona.persona,
          })));
        });
      }
  }
  </code></pre>
  <p>And this is what's in my template :</p>
  <pre><code>&lt;div class=&quot;form-group&quot;&gt;
    &lt;label for=&quot;personas&quot;&gt;Personas&lt;/label&gt;
    &lt;div id=&quot;personas&quot; formArrayName=&quot;personas&quot;&gt;
      &lt;div *ngFor=&quot;let persona of personas.controls; let i = index;&quot; class=&quot;d-flex m-1&quot;&gt;
        &lt;select
          *ngIf=&quot;!(personaService.isFetchingPersonas$ |async) &amp;&amp; (personaService.personas$ |async) as options&quot;
           class=&quot;form-control&quot;&gt;
          &lt;option *ngFor=&quot;let option of options&quot; [ngValue]=&quot;option&quot;&gt;{{ option.persona }}&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Thank you for your help</p>
  <p><strong>!!! EDIT !!!</strong></p>
  <p><strong>I realized that while I tried to achieve my aim, I broke the process of creating new Products, as Persona property was not set correctly anymore.</strong></p>
  <p><strong>So the Stackblitz project is slightely different from the above snippets.
  Because I moved back my project state to when it was functionnal.</strong></p>
  <p><strong>STACKBLITZ : <a href="https://stackblitz.com/edit/angular-ivy-cnmqhx?file=src/app/app.component.ts" rel="nofollow noreferrer">https://angular-ivy-cnmqhx.stackblitz.io</a></strong></p>