feat(material/button-toggle): improve signal forms support

Adds support for using the `name` from signal formsm and adds tests to
verify state synchronization via the `[control]` directive

Author: mmalerba

src/material/button-toggle/button-toggle.spec.ts

@@ -1,15 +1,24 @@
-import {createKeyboardEvent, dispatchEvent, dispatchMouseEvent} from '@angular/cdk/testing/private';
 import {DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, UP_ARROW} from '@angular/cdk/keycodes';
-import {Component, DebugElement, QueryList, ViewChild, ViewChildren} from '@angular/core';
+import {createKeyboardEvent, dispatchEvent, dispatchMouseEvent} from '@angular/cdk/testing/private';
+import {
+  Component,
+  DebugElement,
+  QueryList,
+  signal,
+  viewChild,
+  ViewChild,
+  ViewChildren,
+} from '@angular/core';
 import {
   ComponentFixture,
-  TestBed,
   fakeAsync,
   flush,
+  TestBed,
   tick,
   waitForAsync,
 } from '@angular/core/testing';
 import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
+import {Control, disabled, form} from '@angular/forms/signals';
 import {By} from '@angular/platform-browser';
 import {
   MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS,
@@ -318,6 +327,43 @@ describe('MatButtonToggle with forms', () => {
   }));
 });
 
+describe('MatButtonToggle with signal forms', () => {
+  it('should sync single-select value', () => {
+    const fixture = TestBed.createComponent(SignalFormsButtonToggle);
+    TestBed.tick();
+    expect(fixture.componentInstance.group().value).toBe('two');
+    fixture.nativeElement.querySelector('.mat-button-toggle-button').click();
+    TestBed.tick();
+    expect(fixture.componentInstance.group().value).toBe('one');
+  });
+
+  it('should sync multi-select value', () => {
+    const fixture = TestBed.createComponent(SignalFormsMultiButtonToggle);
+    TestBed.tick();
+    expect(fixture.componentInstance.group().value).toEqual(['two']);
+    fixture.nativeElement.querySelector('.mat-button-toggle-button').click();
+    TestBed.tick();
+    expect(fixture.componentInstance.group().value).toEqual(['two', 'one']);
+  });
+
+  it('should sync disabled state', () => {
+    const fixture = TestBed.createComponent(SignalFormsButtonToggle);
+    TestBed.tick();
+    expect(fixture.componentInstance.group().disabled).toBe(false);
+    fixture.componentInstance.isDisabled.set(true);
+    TestBed.tick();
+    expect(fixture.componentInstance.group().disabled).toBe(true);
+  });
+
+  it('should sync name', () => {
+    const fixture = TestBed.createComponent(SignalFormsButtonToggle);
+    TestBed.tick();
+    expect(fixture.componentInstance.group().name).toMatch(
+      fixture.componentInstance.field().name(),
+    );
+  });
+});
+
 describe('MatButtonToggle without forms', () => {
   describe('inside of an exclusive selection group', () => {
     let fixture: ComponentFixture<ButtonTogglesInsideButtonToggleGroup>;
@@ -1151,6 +1197,41 @@ describe('MatButtonToggle without forms', () => {
   });
 });
 
+@Component({
+  template: `
+  <mat-button-toggle-group [control]="field">
+    @for (opt of options; track $index) {
+      <mat-button-toggle [value]="opt">{{opt}}</mat-button-toggle>
+    }
+  </mat-button-toggle-group>
+  `,
+  imports: [MatButtonToggle, MatButtonToggleGroup, Control],
+})
+class SignalFormsButtonToggle {
+  options = ['one', 'two', 'three'];
+  isDisabled = signal(false);
+  field = form(signal('two'), p => {
+    disabled(p, this.isDisabled);
+  });
+  group = viewChild.required(MatButtonToggleGroup);
+}
+
+@Component({
+  template: `
+  <mat-button-toggle-group multiple [control]="field">
+    @for (opt of options; track $index) {
+      <mat-button-toggle [value]="opt">{{opt}}</mat-button-toggle>
+    }
+  </mat-button-toggle-group>
+  `,
+  imports: [MatButtonToggle, MatButtonToggleGroup, Control],
+})
+class SignalFormsMultiButtonToggle {
+  options = ['one', 'two', 'three'];
+  field = form(signal(['two']));
+  group = viewChild.required(MatButtonToggleGroup);
+}
+
 @Component({
   template: `
   <mat-button-toggle-group

src/material/button-toggle/button-toggle.ts

@@ -12,11 +12,11 @@ import {SelectionModel} from '@angular/cdk/collections';
 import {
   DOWN_ARROW,
   ENTER,
+  hasModifierKey,
   LEFT_ARROW,
   RIGHT_ARROW,
   SPACE,
   UP_ARROW,
-  hasModifierKey,
 } from '@angular/cdk/keycodes';
 import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 import {
@@ -34,6 +34,7 @@ import {
   HostAttributeToken,
   inject,
   InjectionToken,
+  Injector,
   Input,
   OnDestroy,
   OnInit,
@@ -45,6 +46,7 @@ import {
   WritableSignal,
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {Control} from '@angular/forms/signals';
 import {_animationsDisabled, _StructuralStylesLoader, MatPseudoCheckbox, MatRipple} from '../core';
 
 /**
@@ -141,12 +143,23 @@ export class MatButtonToggleChange {
 export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, AfterContentInit {
   private _changeDetector = inject(ChangeDetectorRef);
   private _dir = inject(Directionality, {optional: true});
+  private _injector = inject(Injector);
 
   private _multiple = false;
   private _disabled = false;
   private _disabledInteractive = false;
   private _selectionModel: SelectionModel<MatButtonToggle>;
 
+  private _cachedSignalFormsControl: Control<unknown> | null;
+  private get _signalFormsControl() {
+    // Lazily inject to avoid circular DI dependency.
+    this._cachedSignalFormsControl = this._injector.get(Control, null, {
+      optional: true,
+      self: true,
+    });
+    return this._cachedSignalFormsControl;
+  }
+
   /**
    * Reference to the raw value that the consumer tried to assign. The real
    * value will exclude any values from this one that don't correspond to a
@@ -178,7 +191,8 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
   /** `name` attribute for the underlying `input` element. */
   @Input()
   get name(): string {
-    return this._name;
+    // When using signal forms, prefer the signal forms name.
+    return this._signalFormsControl?.state().name() ?? this._name;
   }
   set name(value: string) {
     this._name = value;