CODEWITHSUNDEEP
angularangular-material
user824624
user824624

Reputation: 8056

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

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

Upvotes: 9

Views: 31926

Answers (3)

CSSBurner
CSSBurner

Reputation: 1991

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

Upvotes: 0

Kyrolus Kamal Fahim Sous
Kyrolus Kamal Fahim Sous

Reputation: 1018

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.

Upvotes: 4

JuNe
JuNe

Reputation: 1997

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

Upvotes: 4

Related Questions