How to access object property of a formControl in Angular?

Question

I have a Angular FormControl with an array of objects. One object looks like:

{id: 'id', title: 'title'}

I have a formControl within a formGroup with other formControls.

fc= null;    
this.fc= new FormControl(this.array);

this.form = this.formBuilder.group({
      fc: this.fc,
      ...
    });

Now a have a mat select in my html:

 <mat-select formControlName="fc" placeholder="Test" multiple>
                <mat-option *ngFor="let op of test" [value]="op.title">{{ op.title }}</mat-option>
              </mat-select>

How can I say that the formControl should use the title property of the object to show the initital value that is in the array? If I map the array only to the title property all works fine.

 this.fc= new FormControl(this.array.map(x=>x.title));

But I need the whole object in my form.

SiddAjmera SiddAjmera · Accepted Answer · 2019-07-15T06:06:20

Give this a try:

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';

/** @title Select with multiple selection */
@Component({
  selector: 'select-multiple-example',
  templateUrl: 'select-multiple-example.html',
  styleUrls: ['select-multiple-example.css'],
})
export class SelectMultipleExample {
  test = [
    { id: '1', title: 'Title 1' },
    { id: '2', title: 'Title 2' },
    { id: '3', title: 'Title 3' },
    { id: '4', title: 'Title 4' },
    { id: '5', title: 'Title 5' },
  ];
  form: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      fc: [['2', '4']],
    });
  }
}


/**  Copyright 2019 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

And in your template:

<form [formGroup]="form">
  <mat-form-field>
    <mat-label>Toppings</mat-label>
    <mat-select formControlName="fc" multiple>
      <mat-option *ngFor="let item of test" [value]="item.id">{{item.title}}</mat-option>
    </mat-select>
  </mat-form-field>
</form>


<!-- Copyright 2019 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->

Here's a Working Sample StackBlitz for your ref.

How to access object property of a formControl in Angular?

2 Answers