Accessing inputs with Angular Material Select and Reactive Forms

Question

I'm planning to use the below described Angular Material Multi-Select Template to allow the user to select multiple inputs (and use them in a function called with (click), so no real-time-access needed). However it's unclear to me how to access the values the user has selected.

I'm guessing the 'toppings' -FormControl()-Object has something to do with it but it doesn't contain the string-values from the possible options array as expected.
EDIT: Updated Html code below.

Source: https://material.angular.io/components/select/overview

//html

<mat-form-field>
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" multiple> //?
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

//extract from my equivalent
<mat-label>Genres</mat-label>
    <mat-select [formControl]="genres" multiple>
      <mat-option *ngFor="let availableGenre of availableGenres" [disabled] ="disableGenres"  [value]="genre">{{availableGenre}}</mat-option>
    </mat-select>

//ts

import {Component} from '@angular/core';
import {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 {
  toppings = new FormControl(); //?
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
}

//extract from my equivalent in the related component.ts

availableGenres: string[]; //assigned in NgOnInit()
genres = new FormControl();

//update:

<mat-form-field>
  <div>
  <mat-label>Genres</mat-label>
    <mat-select [(value)]="genres" multiple>
      <mat-option *ngFor="let availableGenre of availableGenres" [disabled] ="disableGenres"  [value]="genre">{{availableGenre}}</mat-option>
    </mat-select>
  </div>
</mat-form-field>

@joyBlanks Somehow, all the array elements are undefined despite the correct amount on selection. Any idea what could cause this? — Beltway
– Beltway, Commented Aug 27, 2019 at 8:11

jna · Accepted Answer · 2019-08-27 08:38:46Z

1

Hopefully, this can help..

Change your mat-option [value] to

[value]="availableGenre"

Then add a function in your .ts

click(array) {
  console.log('genres:', array)
}

And then a button in the .html

<button (click)="click(genres.value)">Click me</button>

And like joyBlanks says, the values are also available in this.toppings.value

click2() {
  console.log('genres:', this.genres.value)
}

<button (click)="click2()">Click me</button>

edited Aug 27, 2019 at 8:38

answered Aug 27, 2019 at 8:30

jna

99610 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Beltway Over a year ago

changing [value] in mat-option to availableGenre from genre solved the issue with undefined values. Thanks a lot.

jean-charles Bonnard · Accepted Answer · 2019-08-27 07:59:47Z

0

I'm not sure what your trouble is here, but you can access the value of your mat-select with the value attribute :

<mat-form-field>
  <mat-label>{{selectLabel}}</mat-label>
  <mat-select [(value)]="selectValue">
    <mat-option *ngFor="let c of config" [value]="c">
      {{c.label}}
    </mat-option>
  </mat-select>
</mat-form-field>

answered Aug 27, 2019 at 7:59

jean-charles Bonnard

565 bronze badges

1 Comment

Beltway Over a year ago

I updated my solution, however, the values passed into the array are still undefined. Note that I tried both, defining genres as an array of strings and a FormControl object.

Collectives™ on Stack Overflow

Accessing inputs with Angular Material Select and Reactive Forms

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related