What causes "Radio buttons in radio-group have mismatching names." in angular/components?

Set the same `name` on the group's radio buttons (or rely on the group's name propagation)

Radio buttons in radio-group have mismatching names.

Error message

Radio buttons in radio-group have mismatching names.

What it means

MatRadioGroupHarness `getName()` throws when the radio buttons inside a `mat-radio-group` report different `name` attributes. Angular Material requires all radios in a group share one name for correct selection behavior, so the harness surfaces the inconsistency instead of returning an unreliable value.

Source

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

  /** Gets the name of the radio-group. */
  async getName(): Promise<string | null> {
    const hostName = await this._getGroupNameFromHost();
    // 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 (hostName !== null) {
      return hostName;
    }
    // In case we couldn't determine the "name" of a radio-group by reading the
    // "name" attribute, we try to determine the "name" of the group by going
    // through all radio buttons.
    const radioNames = await this._getNamesFromRadioButtons();
    if (!radioNames.length) {
      return null;
    }
    if (!this._checkRadioNamesInGroupEqual(radioNames)) {
      throw Error('Radio buttons in radio-group have mismatching names.');
    }
    return radioNames[0]!;
  }

  /** Gets the id of the radio-group. */
  async getId(): Promise<string | null> {
    return (await this.host()).getProperty<string | null>('id');
  }

  /** Gets the checked radio-button in a radio-group. */
  async getCheckedRadioButton(): Promise<MatRadioButtonHarness | null> {
    for (let radioButton of await this.getRadioButtons()) {
      if (await radioButton.isChecked()) {
        return radioButton;
      }
    }
    return null;
  }

View on GitHub (pinned to 0411926e7d)

Solutions

Set the same `name` on the group's radio buttons (or rely on the group's name propagation)
Remove per-button `name` attributes so the group supplies it consistently
Fix template logic that binds `name` only on some buttons

Example fix

// before
<mat-radio-button name="a">One</mat-radio-button>
<mat-radio-button name="b">Two</mat-radio-button>
// after
<mat-radio-button name="group1">One</mat-radio-button>
<mat-radio-button name="group1">Two</mat-radio-button>

Defensive patterns

Strategy: validation

Validate before calling

const names = await groupHarness['_getNamesFromRadioButtons']?.();
// public alternative: catch in getName; before that, ensure template uses one shared name:
// <mat-radio-group name="group1"> with no per-button name overrides

Try / catch

try {
  const name = await groupHarness.getName();
} catch (e) {
  if (String(e?.message).includes('mismatching names')) {
    fail('All radio buttons in a mat-radio-group must share the same name attribute');
  }
  throw e;
}

Prevention

Never set divergent name attributes on radios inside a group
Let the radio-group propagate its name to children
Review dynamically rendered radios for name bindings

When it happens

Trigger: `await groupHarness.getName()` where child `mat-radio-button` elements have differing or missing `name` attributes (e.g. some radios rendered outside the group template with their own name).

Common situations: Manually set `name` on individual radio buttons that diverges from the group; dynamic form rendering where only some radios got the name bound; copying radios between groups without updating names.

Related errors

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