Value must be an array in multiple-selection mode in angular material mat-select

Question

I am using angular material mat-select component.

        <mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort >

              <ng-container matColumnDef="sensitive">
                <mat-header-cell class="table-header header-p" *matHeaderCellDef> <b>sensitive</b> </mat-header-cell>
                <mat-cell class="table-content context-position "  *matCellDef="let element"  >
                  <mat-select placeholder="sensitive"  multiple [(ngModel)]="element.sensitive" >
                    <mat-option *ngFor="let type of sensitiveList" [value]="type">{{type}}</mat-option>
                  </mat-select>
                </mat-cell>
              </ng-container>

              <mat-header-row class="table-header-row" *matHeaderRowDef="displayedColumns"></mat-header-row>
              <mat-row  [ngClass]="((i%2) == 1) ? 'table-content-row-single' : 'table-content-row-double'"  *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>

typescript sensitiveList : string[] = [ 'none', 'sensitive']; for(var i=0;i

why running the code gives me an error

Value must be an array in multiple-selection mode

Can I see how does your sensitiveList look like? Can you provide an example? — wentjun
– wentjun, Commented Oct 8, 2019 at 5:05
this is not a way to respond to comments with questions in it — Sam Alexander
– Sam Alexander, Commented Aug 4, 2023 at 15:57

JuNe · Accepted Answer · 2019-10-08 14:11:17Z

4

You have a multiple select which is serving an array of data and your elements attribute 'sensitive' isn't an array! Change your attribute 'sensitive' to a string array or remove the 'multiple' from your mat-select to get a single value and your problem should be solved

answered Oct 8, 2019 at 14:11

JuNe

1,99514 silver badges30 bronze badges

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

2 Comments

Enrico Over a year ago

I don't get it, can you give an example?

JuNe Over a year ago

element.sensitive is a NOT an array but databinding in this case requires an array here because the select has the 'multiple' directive

Kyrolus Kamal Fahim Sous · Accepted Answer · 2022-01-09 04:25:16Z

4

I faced this problem. I passed as array and still get the error. The problem for me was that I set a default value for the formContol. for example:

myFormControl: new FormControl(1);

The problem is that the default value should be an array. So, to set the default value for a mat-select with multiple attribute, you should do the following:

myFormControl: new FormControl([1]);

After doing this the problem is solved.

answered Jan 9, 2022 at 4:25

Kyrolus Kamal Fahim Sous

1,0781 gold badge12 silver badges13 bronze badges

Comments

CSSBurner · Accepted Answer · 2024-12-17 16:51:25Z

This error can also be encountered in a Jasmine unit test. If you have a listener for the selectionChange event:

<mat-select #select [formControl]="form.control" (selectionChange)="selectionChangeHandler($event)" ngDefaultControl multiple>
     <!-- content -->
</mat-select>

... and unit test this with a mock argument, the argument must be passed in as an array. For example, the error message will be thrown here:

const select = fixture.debugElement.queryAll(By.css('mat-select'))[0];
select.triggerEventHandler('selectionChange', {value: '123'}); // object passed as argument

but NOT here since this argument is an array:

const select = fixture.debugElement.queryAll(By.css('mat-select'))[0];
select.triggerEventHandler('selectionChange', [{value: 123'}]); // array passed as argument

Collectives™ on Stack Overflow

Value must be an array in multiple-selection mode in angular material mat-select

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related