diff --git a/src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.html b/src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.html index ec55cadec413..0ed909762e88 100644 --- a/src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.html +++ b/src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.html @@ -1,3 +1,13 @@ +
+

Button Toggle inside of a Signal form

+ + Bold + Italic + Underline + +

Chosen value is {{ fontStyleForm().value() }}

+
+

Button Toggle inside of a Template-driven form

diff --git a/src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.ts b/src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.ts index 1cf8dfbb669a..1e291b1a8108 100644 --- a/src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.ts +++ b/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(undefined); + readonly fontStyleControl = new FormControl(''); + readonly fontStyle = signal(undefined); + readonly fontStyleForm = form(signal('')); } diff --git a/src/material/button-toggle/button-toggle.md b/src/material/button-toggle/button-toggle.md index 7634db910ab4..e41062c3ad2d 100644 --- a/src/material/button-toggle/button-toggle.md +++ b/src/material/button-toggle/button-toggle.md @@ -24,9 +24,8 @@ be configured globally using the `MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS` injection t -### Use with `@angular/forms` -`` is compatible with `@angular/forms` and supports both `FormsModule` -and `ReactiveFormsModule`. +### Use with Angular Forms +`` 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.