{"record":{"id":"5b0bc317a788e543","repo":"angular/components","slug":"cannot-change-multiple-mode-of-select-after-init","errorCode":null,"errorMessage":"Cannot change `multiple` mode of select after initialization.","messagePattern":"Cannot change `multiple` mode of select after initialization\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/material/select/select.ts","lineNumber":447,"sourceCode":"  /** Whether the component is required. */\n  @Input({transform: booleanAttribute})\n  get required(): boolean {\n    return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;\n  }\n  set required(value: boolean) {\n    this._required = value;\n    this.stateChanges.next();\n  }\n  private _required: boolean | undefined;\n\n  /** Whether the user should be allowed to select multiple options. */\n  @Input({transform: booleanAttribute})\n  get multiple(): boolean {\n    return this._multiple;\n  }\n  set multiple(value: boolean) {\n    if (this._selectionModel && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throw getMatSelectDynamicMultipleError();\n    }\n\n    this._multiple = value;\n  }\n  private _multiple: boolean = false;\n\n  /** Whether to center the active option over the trigger. */\n  @Input({transform: booleanAttribute})\n  disableOptionCentering = this._defaultOptions?.disableOptionCentering ?? false;\n\n  /**\n   * Function to compare the option values with the selected values. The first argument\n   * is a value from an option. The second is a value from the selection. A boolean\n   * should be returned.\n   */\n  @Input()\n  get compareWith() {\n    return this._compareWith;","sourceCodeStart":429,"sourceCodeEnd":465,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/select/select.ts#L429-L465","documentation":"MatSelect's `multiple` input throws if changed after the select has initialized (once `_selectionModel` exists). Switching between single and multi mode after init would corrupt the selection model, so Angular Material forbids it in dev mode.","triggerScenarios":"Binding `[multiple]` to a value that changes at runtime (e.g. `[multiple]=\"isMulti\"` toggled by user action or route data), or setting the property imperatively after the view initializes.","commonSituations":"Dynamic forms that toggle select mode based on config; Angular restructuring where a new component instance was expected but the same one is reused; setting the input in `ngAfterViewInit` or later.","solutions":["Keep `multiple` static per component instance (bind to a value that does not change)","Destroy and recreate the mat-select (e.g. wrap with `*ngIf` keyed or `@if`) when mode must change","Initialize the mode before the select is rendered, e.g. compute it in ngOnInit from route/config"],"exampleFix":"// before\n<mat-select [multiple]=\"dynamicMode\">...</mat-select>\n// after\n@if (dynamicMode) {\n  <mat-select multiple>...</mat-select>\n} @else {\n  <mat-select>...</mat-select>\n}","handlingStrategy":"validation","validationCode":"// Guard before binding: keep the multiple flag fixed for the component lifetime\nif (select._selectionModel && multipleChanged) {\n  throw new Error('Do not change [multiple] after mat-select initialization');\n}","typeGuard":null,"tryCatchPattern":"try {\n  component.isMulti = !component.isMulti;\n  fixture.detectChanges();\n} catch (e) {\n  if (String(e?.message).includes('multiple` mode')) {\n    fail('Recreate the mat-select instead of toggling [multiple]');\n  }\n  throw e;\n}","preventionTips":["Treat [multiple] as a static input per instance","Derive mode once in ngOnInit from route/config data","Recreate the select (ngIf/keyed block) when mode must change"],"tags":["angular","material","select","input","dev-mode"],"backgroundTag":"input-changed-after-init","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}