From c9e639e274e459e6a3831b2e2f653c68a14789b9 Mon Sep 17 00:00:00 2001 From: Michael Small Date: Wed, 16 Sep 2026 20:10:53 -0500 Subject: [PATCH] docs: mention forms support in outstanding controls --- src/material/autocomplete/autocomplete.md | 4 ++++ src/material/datepicker/datepicker.md | 6 +++--- src/material/list/list.md | 4 ++++ src/material/select/select.md | 12 ++++++++---- src/material/slider/slider.md | 4 ++++ src/material/timepicker/timepicker.md | 4 +++- 6 files changed, 26 insertions(+), 8 deletions(-) diff --git a/src/material/autocomplete/autocomplete.md b/src/material/autocomplete/autocomplete.md index 8cda8f8874c6..b2cd5c3d922c 100644 --- a/src/material/autocomplete/autocomplete.md +++ b/src/material/autocomplete/autocomplete.md @@ -28,6 +28,10 @@ to the input's `matAutocomplete` property. "file":"autocomplete-simple-example.html", "region":"input"}) --> +### Use with Angular Forms + +`matAutocomplete` is compatible with `@angular/forms` and supports `FormField`, `FormsModule`, and `ReactiveFormsModule`. + ### Adding a custom filter At this point, the autocomplete panel should be toggleable on focus and options should be diff --git a/src/material/datepicker/datepicker.md b/src/material/datepicker/datepicker.md index d44c298a0e80..c4b689c3b62a 100644 --- a/src/material/datepicker/datepicker.md +++ b/src/material/datepicker/datepicker.md @@ -61,10 +61,10 @@ Connect the range picker and range input using the `rangePicker` property: -### Date range input forms integration +### Use with Angular Forms -The `mat-date-range-input` component can be used together with the `FormGroup` directive from -`@angular/forms` to group the start and end values together and to validate them as a group. +The `mat-date-range-input` component can be used together with the `FormField` or `FormGroup` directive +from `@angular/forms` to group the start and end values together and to validate them as a group. diff --git a/src/material/list/list.md b/src/material/list/list.md index a6ca84936f70..e0505a35d85f 100644 --- a/src/material/list/list.md +++ b/src/material/list/list.md @@ -98,6 +98,10 @@ Simple action lists can use the `mat-list-item` attribute on button tag elements ``` +### Use with Angular Forms + +`` is compatible with `@angular/forms` and supports `FormField`, `FormsModule`, and `ReactiveFormsModule`. + ### Selection lists A selection list provides an interface for selecting values, where each list item is an option. diff --git a/src/material/select/select.md b/src/material/select/select.md index 6bedcb29c88c..27b591e1fc40 100644 --- a/src/material/select/select.md +++ b/src/material/select/select.md @@ -20,15 +20,19 @@ To use a native select inside ``, import `MatInputModule` and ad ### Getting and setting the select value +#### 2-way binding with `value` + The `` supports 2-way binding to the `value` property without the need for Angular forms. -Both`` and ``, `` -also supports a `compareWith` function. (Additional information about using a custom `compareWith` -function can be found in the +#### Use with Angular Forms + +Both `` and ``, `` also supports a +`compareWith` function. (Additional information about using a custom `compareWith` function can be found in the [Angular forms documentation](https://angular.dev/api/forms/SelectControlValueAccessor#compareWith)). diff --git a/src/material/slider/slider.md b/src/material/slider/slider.md index c8e358b8e582..21d041f58b4a 100644 --- a/src/material/slider/slider.md +++ b/src/material/slider/slider.md @@ -31,6 +31,10 @@ that of the `matSliderStartThumb`, though they both may have the same value. +### Use with Angular Forms + +`` is compatible with `@angular/forms` and supports `FormField`, `FormsModule`, and `ReactiveFormsModule`. + ### Thumb label By default, the exact selected value of a slider is not visible to the user. However, this value can be added to the thumb by adding the `discrete` attribute. diff --git a/src/material/timepicker/timepicker.md b/src/material/timepicker/timepicker.md index 1240110c7c78..3a46a25280be 100644 --- a/src/material/timepicker/timepicker.md +++ b/src/material/timepicker/timepicker.md @@ -19,7 +19,9 @@ The timepicker input and toggle can be used either on their own or as a part of -### Timepicker forms integration +### Use with Angular Forms + +`matTimepicker` is compatible with `@angular/forms` and supports `FormField`, `FormsModule`, and `ReactiveFormsModule`. The timepicker input integrates with the `@angular/forms` module by providing itself as a `ControlValueAccessor` and a `Validator` (see [Input validation](#input-validation) below for more