docs: add signal form example for button toggle (#33592)

* docs: add signal form example for button toggle

* docs: update copy related to forms for Button Toggle

Author: msmallest

src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.html

@@ -1,3 +1,13 @@
+<section>
+  <h4>Button Toggle inside of a Signal form</h4>
+  <mat-button-toggle-group [formField]="fontStyleForm" aria-label="Font Style">
+    <mat-button-toggle value="bold">Bold</mat-button-toggle>
+    <mat-button-toggle value="italic">Italic</mat-button-toggle>
+    <mat-button-toggle value="underline">Underline</mat-button-toggle>
+  </mat-button-toggle-group>
+  <p>Chosen value is {{ fontStyleForm().value() }}</p>
+</section>
+
 <section>
   <h4>Button Toggle inside of a Template-driven form</h4>
   <mat-button-toggle-group [(ngModel)]="fontStyle" aria-label="Font Style">

src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.ts

@@ -1,5 +1,6 @@
 import {Component, signal} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {form, FormField} from '@angular/forms/signals';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 
 /**
@@ -8,9 +9,10 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
 @Component({
   selector: 'button-toggle-forms-example',
   templateUrl: 'button-toggle-forms-example.html',
-  imports: [MatButtonToggleModule, FormsModule, ReactiveFormsModule],
+  imports: [MatButtonToggleModule, FormsModule, ReactiveFormsModule, FormField],
 })
 export class ButtonToggleFormsExample {
-  fontStyleControl = new FormControl('');
-  fontStyle = signal<string | undefined>(undefined);
+  readonly fontStyleControl = new FormControl('');
+  readonly fontStyle = signal<string | undefined>(undefined);
+  readonly fontStyleForm = form(signal(''));
 }

src/material/button-toggle/button-toggle.md

@@ -24,9 +24,8 @@ be configured globally using the `MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS` injection t
 
 <!-- example(button-toggle-appearance) -->
 
-### Use with `@angular/forms`
-`<mat-button-toggle-group>` is compatible with `@angular/forms` and supports both `FormsModule`
-and `ReactiveFormsModule`.
+### Use with Angular Forms
+`<mat-button-toggle-group>` is compatible with `@angular/forms` and supports `FormField`, `FormsModule`, and `ReactiveFormsModule`.
 
 ### Orientation
 The button-toggles can be rendered in a vertical orientation by adding the `vertical` attribute.