Skip to content

Commit 8189fbe

Browse files
msmallestcrisbeto
authored andcommitted
docs: mention forms support in outstanding controls (#33823)
(cherry picked from commit bd54848)
1 parent cd911ae commit 8189fbe

6 files changed

Lines changed: 26 additions & 8 deletions

File tree

‎src/material/autocomplete/autocomplete.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ to the input's `matAutocomplete` property.
2828
"file":"autocomplete-simple-example.html",
2929
"region":"input"}) -->
3030

31+
### Use with Angular Forms
32+
33+
`matAutocomplete` is compatible with `@angular/forms` and supports `FormField`, `FormsModule`, and `ReactiveFormsModule`.
34+
3135
### Adding a custom filter
3236

3337
At this point, the autocomplete panel should be toggleable on focus and options should be

‎src/material/datepicker/datepicker.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,10 @@ Connect the range picker and range input using the `rangePicker` property:
6161

6262
<!-- example(date-range-picker-overview) -->
6363

64-
### Date range input forms integration
64+
### Use with Angular Forms
6565

66-
The `mat-date-range-input` component can be used together with the `FormGroup` directive from
67-
`@angular/forms` to group the start and end values together and to validate them as a group.
66+
The `mat-date-range-input` component can be used together with the `FormField` or `FormGroup` directive
67+
from `@angular/forms` to group the start and end values together and to validate them as a group.
6868

6969
<!-- example(date-range-picker-forms) -->
7070

‎src/material/list/list.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,10 @@ Simple action lists can use the `mat-list-item` attribute on button tag elements
9898
</mat-action-list>
9999
```
100100

101+
### Use with Angular Forms
102+
103+
`<mat-selection-list>` is compatible with `@angular/forms` and supports `FormField`, `FormsModule`, and `ReactiveFormsModule`.
104+
101105
### Selection lists
102106
A selection list provides an interface for selecting values, where each list item is an option.
103107

‎src/material/select/select.md‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,19 @@ To use a native select inside `<mat-form-field>`, import `MatInputModule` and ad
2020

2121
### Getting and setting the select value
2222

23+
#### 2-way binding with `value`
24+
2325
The `<mat-select>` supports 2-way binding to the `value` property without the need for Angular
2426
forms.
2527

2628
<!-- example(select-value-binding) -->
2729

28-
Both`<mat-select>` and `<select>` support all of the form directives from the core `FormsModule` (`NgModel`) and
29-
`ReactiveFormsModule` (`FormControl`, `FormGroup`, etc.) As with native `<select>`, `<mat-select>`
30-
also supports a `compareWith` function. (Additional information about using a custom `compareWith`
31-
function can be found in the
30+
#### Use with Angular Forms
31+
32+
Both `<mat-select>` and `<select>` support all of the form directives from the core `@angular/forms`.
33+
Including `FormField` (signal forms), `FormsModule` (`NgModel`) and `ReactiveFormsModule`
34+
(`FormControl`, `FormGroup`, etc.) As with native `<select>`, `<mat-select>` also supports a
35+
`compareWith` function. (Additional information about using a custom `compareWith` function can be found in the
3236
[Angular forms documentation](https://angular.dev/api/forms/SelectControlValueAccessor#compareWith)).
3337

3438
<!-- example(select-form) -->

‎src/material/slider/slider.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ that of the `matSliderStartThumb`, though they both may have the same value.
3131

3232
<!-- example(slider-range) -->
3333

34+
### Use with Angular Forms
35+
36+
`<mat-slider>` is compatible with `@angular/forms` and supports `FormField`, `FormsModule`, and `ReactiveFormsModule`.
37+
3438
### Thumb label
3539
By default, the exact selected value of a slider is not visible to the user. However, this value can
3640
be added to the thumb by adding the `discrete` attribute.

‎src/material/timepicker/timepicker.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ The timepicker input and toggle can be used either on their own or as a part of
1919
<!-- example({"example":"timepicker-overview",
2020
"file":"timepicker-overview-example.html"}) -->
2121

22-
### Timepicker forms integration
22+
### Use with Angular Forms
23+
24+
`matTimepicker` is compatible with `@angular/forms` and supports `FormField`, `FormsModule`, and `ReactiveFormsModule`.
2325

2426
The timepicker input integrates with the `@angular/forms` module by providing itself as a
2527
`ControlValueAccessor` and a `Validator` (see [Input validation](#input-validation) below for more

0 commit comments

Comments
 (0)