CODEWITHSUNDEEP
htmlangularangular2-templateangular2-formsangular4-forms
THeCoderBaba
THeCoderBaba

Reputation: 31

Error: Cannot change `multiple` mode of select after initialization

The error is on the image:

Error image

My code:

<div fxFlex.gt-lg="100" fxFlex="100" *ngIf="requestAction == 'add'">
    <div class="pb-1">
            <md2-select placeholder="{{'WidgetType'|translate:lang}}" class="input_custom_width"(change)="widgetNode($event.value)"  required>
                <md2-option *ngFor="let widgetType of widgetTypeAry" [value]="widgetType.value">
                    {{widgetType.name}}
                </md2-option>
            </md2-select>
    </div>
</div>
<div fxFlex.gt-lg="100" fxFlex="100" *ngIf="fieldsObj['node'] && showRequestAction" >
<div class="pb-1">
    <md2-select placeholder="{{'Node'|translate:lang}}" [formControl]="editWidgetForm.controls['nodeId']" [(ngModel)]="nodeId" class="input_custom_width" [(multiple)]="isMultiNode" (change)="nodeChange($event.value)" required>
        <md2-select-header>
            <md-input-container class="input_custom_width">
                <input mdInput type="text" placeholder="{{'Search'| translate:lang}}" [ngModelOptions]="{standalone: true}" [(ngModel)]="searchNode"/>
            </md-input-container>
        </md2-select-header>
        <md2-option *ngFor="let node of nodesAry | filterPipe : searchNode" [value]="node.value">
            {{ node.name }}
        </md2-option>
    </md2-select>
    <small *ngIf="editWidgetForm.controls['nodeId'].hasError('required') && editWidgetForm.controls['nodeId'].touched" class="mat-text-warn">{{'nodeReq'|translate:lang}}</small>
</div>
</div>

When I use the multiple attribute in a select dropdown, it works fine. However, when I use [multiple], it only works in my edit form and not in the add form. I encounter the following error:

Error: Cannot change the multiple mode of select after initialization.

Upvotes: 2

Views: 3148

Answers (2)

himanshu chauhan
himanshu chauhan

Reputation: 11

I refer the angular select field docs so for the refrence you should check this docs for your problem solution

https://material.angular.io/components/select/overview#troubleshooting

just use this way

@if (isMultiple) {  
   <mat-select multiple> ... </mat-select> 
} @else {  
   <mat-select>...</mat-select>
}

in your ts file change the isMultiple variable value in true/false

Upvotes: 0

Daniel Charua
Daniel Charua

Reputation: 106

There is a very ugly workaround for this problem, warp your mat-select in a *ngif=true, and create a duplicate with the multiple property, wrapped in a *ngif=!true just beneath it

Upvotes: 7

Related Questions