Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/material/autocomplete/autocomplete.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions src/material/datepicker/datepicker.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,10 @@ Connect the range picker and range input using the `rangePicker` property:

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

### 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.

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

Expand Down
4 changes: 4 additions & 0 deletions src/material/list/list.md
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,10 @@ Simple action lists can use the `mat-list-item` attribute on button tag elements
</mat-action-list>
```

### Use with Angular Forms

`<mat-selection-list>` 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.

Expand Down
12 changes: 8 additions & 4 deletions src/material/select/select.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,19 @@ To use a native select inside `<mat-form-field>`, import `MatInputModule` and ad

### Getting and setting the select value

#### 2-way binding with `value`

The `<mat-select>` supports 2-way binding to the `value` property without the need for Angular
forms.

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

Both`<mat-select>` and `<select>` support all of the form directives from the core `FormsModule` (`NgModel`) and
`ReactiveFormsModule` (`FormControl`, `FormGroup`, etc.) As with native `<select>`, `<mat-select>`
also supports a `compareWith` function. (Additional information about using a custom `compareWith`
function can be found in the
#### Use with Angular Forms

Both `<mat-select>` and `<select>` support all of the form directives from the core `@angular/forms`.
Including `FormField` (signal forms), `FormsModule` (`NgModel`) and `ReactiveFormsModule`
(`FormControl`, `FormGroup`, etc.) As with native `<select>`, `<mat-select>` 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)).

<!-- example(select-form) -->
Expand Down
4 changes: 4 additions & 0 deletions src/material/slider/slider.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,10 @@ that of the `matSliderStartThumb`, though they both may have the same value.

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

### Use with Angular Forms

`<mat-slider>` 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.
Expand Down
4 changes: 3 additions & 1 deletion src/material/timepicker/timepicker.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,9 @@ The timepicker input and toggle can be used either on their own or as a part of
<!-- example({"example":"timepicker-overview",
"file":"timepicker-overview-example.html"}) -->

### 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
Expand Down
Loading