angular/components · error

The locator found a radio-group with name "${name}", but som

Error message

The locator found a radio-group with name "${name}", but some radio-button's within the group have mismatching names, which is invalid.

What it means

The radio-group locator (used by `getAllHarnesses`/`getHarness` with a `name` filter) throws when a group's host name matches the filter but its child buttons have inconsistent names. This guards against matching an invalid group whose radios are not actually grouped correctly.

Source

Thrown at src/material/radio/testing/radio-harness.ts:160

  protected static async _checkRadioGroupName(harness: MatRadioGroupHarness, name: string) {
    // Check if there is a radio-group which has the "name" attribute set
    // to the expected group name. It's not possible to always determine
    // the "name" of a radio-group by reading the attribute. This is because
    // the radio-group does not set the "name" as an element attribute if the
    // "name" value is set through a binding.
    if ((await harness._getGroupNameFromHost()) === name) {
      return true;
    }
    // Check if there is a group with radio-buttons that all have the same
    // expected name. This implies that the group has the given name. It's
    // not possible to always determine the name of a radio-group through
    // the attribute because there is
    const radioNames = await harness._getNamesFromRadioButtons();
    if (radioNames.indexOf(name) === -1) {
      return false;
    }
    if (!harness._checkRadioNamesInGroupEqual(radioNames)) {
      throw Error(
        `The locator found a radio-group with name "${name}", but some ` +
          `radio-button's within the group have mismatching names, which is invalid.`,
      );
    }
    return true;
  }
}

/** Harness for interacting with a mat-radio-button in tests. */
export class MatRadioButtonHarness extends ComponentHarness {
  /** The selector for the host element of a `MatRadioButton` instance. */
  static hostSelector = '.mat-mdc-radio-button';

  /**
   * Gets a `HarnessPredicate` that can be used to search for a radio button with specific
   * attributes.
   * @param options Options for filtering which radio button instances are considered a match.
   * @return a `HarnessPredicate` configured with the given options.

View on GitHub (pinned to 0411926e7d)

Solutions

  1. Make all child radio `name` attributes match the group name
  2. Remove per-button name overrides so the group propagates its name
  3. Fix conditional branches that render radios with divergent names

Example fix

// before
<mat-radio-group name="g1">
  <mat-radio-button name="x">A</mat-radio-button>
</mat-radio-group>
// after
<mat-radio-group name="g1">
  <mat-radio-button name="g1">A</mat-radio-button>
</mat-radio-group>
Defensive patterns

Strategy: validation

Validate before calling

// Before querying by name, ensure child radios share the group's name in the template:
// <mat-radio-group name="group1"><mat-radio-button name="group1">A</mat-radio-button></mat-radio-group>

Try / catch

try {
  await harnessLoader.getHarness(MatRadioGroupHarness.with({name: 'group1'}));
} catch (e) {
  if (String(e?.message).includes('mismatching names')) {
    fail(`Group 'group1' has radios with inconsistent name attributes`);
  }
  throw e;
}

Prevention

When it happens

Trigger: Querying `locatorFactory.getHarness(MatRadioGroupHarness.with({name: 'group1'}))` where the group host has name 'group1' but child radios carry mixed names.

Common situations: Same underlying DOM problem as mismatched radio names (265) but discovered during harness filtering; partially migrated templates; radios conditionally rendered with their own name.

Related errors


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