CODEWITHSUNDEEP
htmlangularform-control
A.Service
A.Service

Reputation: 419

How to access object property of a formControl in Angular?

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.

Upvotes: 1

Views: 8637

Answers (2)

Eliseo
Eliseo

Reputation: 57909

If your mat-option is like

<mat-option *ngFor="let item of test" [value]="item.id">{{item.title}}</mat-option>

Your formControl must be,e,g -see that is an array or string-

fc: [['2','4']]

If your mat-option is like

<mat-option *ngFor="let item of test" [value]="item">{{item.title}}</mat-option>

Your formControl must be,e,g, -see that is an array of objects-, and in this case you need use a reference of the object

fc: [this.test[1],this.test[3]] //<--use reference to the object

//be careful!!
//fc:[{id:'2',title:'Title2'},{id:'4',title:'Title 4'}] //<--ERROR

Upvotes: 0

SiddAjmera
SiddAjmera

Reputation: 39432

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.

Upvotes: 1

Related Questions