title: Angular 5 - Form Control with objects
body: <p>I'm currently working on an Angular application backed by Django.</p>
  
  <p>One part of the application is that it needs to display a list of members. The members array looks somewhat like this:</p>
  
  <pre><code>[
    {
      name: 'John Smith',
      id: 3,
      score_set: [...]
    },
    {
      name: 'Jane Doe',
      id: 7,
      score_set: [...]
    },
    {
      name: 'Bill Appleseed',
      id: 3,
      score_set: [...]
    },
    {
      name: 'Bob Lee',
      id: 3,
      score_set: [...]
    }
  ]
  </code></pre>
  
  <p>I got that working, but I also needed the user to be able to edit the names of those members. I tried using Reactive Forms to get this working:</p>
  
  <p>First, I made a <code>FormGroup</code> consisting of just one <code>FormArray</code>. This <code>FormArray</code> basically contained all of the member objects:</p>
  
  <pre><code>this.form = this.fb.group({
    roster: this.fb.array(this.members.map((elem) =&gt; [elem, Validators.required]))
  });
  </code></pre>
  
  <p>Next, I wrote out the template for the component:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;form&gt;
    &lt;div [formGroup]="form"&gt;
      &lt;div formArrayName="roster"&gt;
        &lt;div *ngFor="let control of form.controls.roster.controls"&gt;
          &lt;div class="form-group"&gt;
            &lt;input class="form-control" [formControl]="control" placeholder="Enter name"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>But instead of displaying the <code>name</code> property of each member it just tries to display the whole object, making <code>[Object object]</code>. Is there any way to configure each <code>FormControl</code> to use the <code>name</code> property as a value?</p>
  
  <p>I want it so that only the name is displayed in the <code>&lt;input&gt;</code>, and when the user edits the <code>&lt;input&gt;</code> it updates the <code>name</code> property of the object, while retaining all the other properties.</p>
  
  <p>Any help would be appreciated!</p>