angular/components · error

The locator found a radio-group with name

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.

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.

Appendix: 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)