angular/components · error · Error

Listbox has selected values that do not match any of its opt

Error message

Listbox has selected values that do not match any of its options.

What it means

CdkListbox._verifyOptionValues throws when the selected values contain entries that do not match any registered CdkOption values. Every selected value must correspond to an existing option's value, otherwise the listbox state is inconsistent.

Source

Thrown at src/cdk/listbox/listbox.ts:1025

          }
          return;
        }
      }
    });
  }

  /** Verifies that the option values are valid. */
  private _verifyOptionValues() {
    if (this.options && (typeof ngDevMode === 'undefined' || ngDevMode)) {
      const selected = this.selectionModel.selected;
      const invalidValues = this._getInvalidOptionValues(selected);

      if (!this.multiple && selected.length > 1) {
        throw Error('Listbox cannot have more than one selected value in single selection mode.');
      }

      if (invalidValues.length) {
        throw Error('Listbox has selected values that do not match any of its options.');
      }
    }
  }

  /**
   * Coerces a value into an array representing a listbox selection.
   * @param value The value to coerce
   * @return An array
   */
  private _coerceValue(value: readonly T[]) {
    return value == null ? [] : coerceArray(value);
  }

  /**
   * Get the sublist of values that do not represent valid option values in this listbox.
   * @param values The list of values
   * @return The sublist of values that are not valid option values
   */

View on GitHub (pinned to 0411926e7d)

Solutions

1. Ensure the value is set only after options are rendered (e.g. set value in/ngAfterContentInit or after the async options load).
2. Validate values against option values before assigning; filter out unknown values.
3. Fix type mismatches — compare the same type (string vs number) and casing as the cdkOption values.
4. If persisted selections may be stale, sanitize them against the current option list on load.

Example fix

// before
form.patchValue({ tags: ['stale-tag'] }); // no cdkOption with value 'stale-tag'
// after
const valid = ['stale-tag'].filter(v => optionValues.includes(v));
form.patchValue({ tags: valid });

const optionValues = new Set(options.map(o => o.value));
const validSelection = selected.filter(v => optionValues.has(v));
if (validSelection.length !== selected.length) {
  listbox.value = validSelection;
}

function allValuesMatch(selection: unknown[], options: {value: unknown}[]): boolean {
  const known = new Set(options.map(o => o.value));
  return selection.every(v => known.has(v));
}

try {
  listbox.value = savedSelection;
} catch (e) {
  if ((e as Error).message.includes('do not match any of its options')) {
    listbox.value = savedSelection.filter(v => optionValues.has(v));
  } else { throw e; }
}

When it happens

Trigger: Setting listbox value (directly or via NgModel/FormControl) to values not present among the rendered cdkOption values; options loaded asynchronously after the value is set; values differing only by type (string '1' vs number 1) or case.

Common situations: Form values restored from persistence before the options render; list of options fetched from an API while the control keeps stale/old values; renaming an option's value without migrating saved selections.

Understand the failure class

Background: Invalid option value errors: "must be one of", "is not a valid", and "only allows" failures explained — this error's family across 23 libraries.

Related errors

• Listbox cannot have more than one selected value in single s
• CdkSelectAll: missing CdkSelection in the parent
• CdkSelectAll: CdkSelection must have cdkSelectionMultiple se
• CdkSelectionColumn: missing CdkSelection in the parent
• CdkSelectionColumn: missing parent table

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