angular/components · error · Error

Cannot pass multiple values into SelectionModel with single-

Error message

Cannot pass multiple values into SelectionModel with single-value mode.

What it means

SelectionModel._verifyValueAssignment throws getMultipleValuesInSingleSelectionError() when more than one value is passed to select/deselect/setSelection while the model is in single-value mode (multiple: false). The model can only hold one value, so a multi-value assignment is treated as a developer mistake rather than silently truncating.

Source

Thrown at src/cdk/collections/selection-model.ts:252

        this._deselectedToEmit.push(value);
      }
    }
  }

  /** Clears out the selected values. */
  private _unmarkAll() {
    if (!this.isEmpty()) {
      this._selection.forEach(value => this._unmarkSelected(value));
    }
  }

  /**
   * Verifies the value assignment and throws an error if the specified value array is
   * including multiple values while the selection model is not supporting multiple values.
   */
  private _verifyValueAssignment(values: T[]) {
    if (values.length > 1 && !this._multiple && (typeof ngDevMode === 'undefined' || ngDevMode)) {
      throw getMultipleValuesInSingleSelectionError();
    }
  }

  /** Whether there are queued up change to be emitted. */
  private _hasQueuedChanges() {
    return !!(this._deselectedToEmit.length || this._selectedToEmit.length);
  }

  /** Returns a value that is comparable to inputValue by applying compareWith function, returns the same inputValue otherwise. */
  private _getConcreteValue(inputValue: T, selection?: Set<T>): T {
    if (!this.compareWith) {
      return inputValue;
    } else {
      selection = selection ?? this._selection;
      for (let selectedValue of selection) {
        if (this.compareWith!(inputValue, selectedValue)) {
          return selectedValue;
        }

View on GitHub (pinned to 0411926e7d)

Solutions

1. Create the model with multiple: true: new SelectionModel<T>(true).
2. In single mode, call select(value) with exactly one value (or pass a 1-element array).
3. Loop over values calling select one at a time if last-wins semantics are desired (with emitSelectionChanges as needed).

Example fix

// before
const sel = new SelectionModel<string>(); // single mode
sel.select(...chosen);

// after
const sel = new SelectionModel<string>(true /* multiple */);
sel.select(...chosen);

function safeSelect<T>(model: SelectionModel<T>, values: T[]): void {
  if (values.length > 1 && !model.multiple) {
    throw new Error('Refusing multi-value select on single-mode SelectionModel');
  }
  model.select(...values);
}

function isMultipleModel<T>(m: SelectionModel<T>): m is SelectionModel<T> & { multiple: true } {
  return (m as { multiple?: boolean }).multiple === true;
}

try {
  model.select(...values);
} catch (e) {
  if ((e as Error).message.includes('single-value mode')) {
    model.select(values[0]); // keep first value
  } else throw e;
}

When it happens

Trigger: Calling model.select(a, b), model.setSelection(a, b), or model.deselect(...values) with arrays of length > 1 on a SelectionModel constructed without multiple: true (also via the convenience wrappers that batch).

Common situations: Spreading arrays from an <input multiple> or multi-select UI into a single-mode model; model created before multi-select support was needed; shared selection service reused by both single- and multi-select components.

Related errors

• SelectionSet: not multiple selection
• SelectionSet: index required when trackByFn is used.
• CdkSelectAll: missing CdkSelection in the parent
• Unknown data source
• CdkSelection: index required when trackBy is used

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/6de50d617df70267. Report an issue: GitHub.