docs: add signal form example for mat-select

src/components-examples/material/select/index.ts

@@ -1,9 +1,12 @@
 export {SelectCustomTriggerExample} from './select-custom-trigger/select-custom-trigger-example';
 export {SelectDisabledExample} from './select-disabled/select-disabled-example';
+export {SelectDisabledSignalFormExample} from './select-disabled-signal-form/select-disabled-signal-form-example';
 export {SelectErrorStateMatcherExample} from './select-error-state-matcher/select-error-state-matcher-example';
 export {SelectFormExample} from './select-form/select-form-example';
+export {SelectFormSignalFormExample} from './select-form-signal-form/select-form-signal-form-example';
 export {SelectHintErrorExample} from './select-hint-error/select-hint-error-example';
 export {SelectMultipleExample} from './select-multiple/select-multiple-example';
+export {SelectMultipleSignalFormExample} from './select-multiple-signal-form/select-multiple-signal-form-example';
 export {SelectNoRippleExample} from './select-no-ripple/select-no-ripple-example';
 export {SelectOptgroupExample} from './select-optgroup/select-optgroup-example';
 export {SelectOverviewExample} from './select-overview/select-overview-example';
@@ -13,4 +16,5 @@ export {SelectValueBindingExample} from './select-value-binding/select-value-bin
 export {SelectReactiveFormExample} from './select-reactive-form/select-reactive-form-example';
 export {SelectInitialValueExample} from './select-initial-value/select-initial-value-example';
 export {SelectSelectableNullExample} from './select-selectable-null/select-selectable-null-example';
+export {SelectHintErrorSignalFormExample} from './select-hint-error-signal-form/select-hint-error-signal-form-example';
 export {SelectHarnessExample} from './select-harness/select-harness-example';

src/components-examples/material/select/select-disabled-signal-form/select-disabled-signal-form-example.html

@@ -0,0 +1,26 @@
+<p>
+  <mat-checkbox [formField]="form.disableField">Disable select</mat-checkbox>
+</p>
+
+<h4>mat-select</h4>
+<mat-form-field>
+  <mat-label>Choose an option</mat-label>
+  <mat-select [formField]="form.option">
+    <mat-option value="option1">Option 1</mat-option>
+    <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
+    <mat-option value="option3">Option 3</mat-option>
+  </mat-select>
+</mat-form-field>
+
+<h4>native html select</h4>
+<mat-form-field>
+  <mat-label>Choose an option</mat-label>
+  <select matNativeControl [formField]="form.vehicle">
+    <option value="" selected></option>
+    <option value="volvo">Volvo</option>
+    <option value="saab" disabled>Saab</option>
+    <option value="mercedes">Mercedes</option>
+    <option value="audi">Audi</option>
+  </select>
+</mat-form-field>
+

src/components-examples/material/select/select-disabled-signal-form/select-disabled-signal-form-example.ts

@@ -0,0 +1,20 @@
+import {Component, signal} from '@angular/core';
+import {disabled, form, FormField} from '@angular/forms/signals';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+
+/** @title Disabled select (signal forms) */
+@Component({
+  selector: 'select-disabled-signal-form-example',
+  templateUrl: 'select-disabled-signal-form-example.html',
+  imports: [MatCheckboxModule, FormField, MatFormFieldModule, MatSelectModule, MatInputModule],
+})
+export class SelectDisabledSignalFormExample {
+  // TODO - more distinct name?
+  protected form = form(signal({option: '', vehicle: '', disableField: false}), p => {
+    disabled(p.option, {when: ({valueOf}) => valueOf(p.disableField)});
+    disabled(p.vehicle, {when: ({valueOf}) => valueOf(p.disableField)});
+  });
+}

src/components-examples/material/select/select-form-signal-form/select-form-signal-form-example.html

@@ -0,0 +1,23 @@
+<form>
+  <h4>mat-select</h4>
+  <mat-form-field>
+    <mat-label>Favorite food</mat-label>
+    <mat-select [formField]="selectedValue">
+      @for (food of foods; track food) {
+        <mat-option [value]="food.value">{{food.viewValue}}</mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+  <p> Selected food: {{selectedValue().value()}} </p>
+  <h4>native html select</h4>
+  <mat-form-field>
+    <mat-label>Favorite car</mat-label>
+    <select matNativeControl [formField]="selectedCar">
+      <option value="" selected></option>
+      @for (car of cars; track car) {
+        <option [value]="car.value">{{car.viewValue}}</option>
+      }
+    </select>
+  </mat-form-field>
+  <p> Selected car: {{selectedCar().value()}} </p>
+</form>

src/components-examples/material/select/select-form-signal-form/select-form-signal-form-example.ts

@@ -0,0 +1,40 @@
+import {Component, signal} from '@angular/core';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {form, FormField} from '@angular/forms/signals';
+
+interface Food {
+  value: string;
+  viewValue: string;
+}
+
+interface Car {
+  value: string;
+  viewValue: string;
+}
+
+/**
+ * @title Select in a form (signal forms)
+ */
+@Component({
+  selector: 'select-form-signal-form-example',
+  templateUrl: 'select-form-signal-form-example.html',
+  imports: [FormField, MatFormFieldModule, MatSelectModule, MatInputModule],
+})
+export class SelectFormSignalFormExample {
+  protected selectedValue = form(signal(''));
+  protected selectedCar = form(signal(''));
+
+  protected foods: Food[] = [
+    {value: 'steak-0', viewValue: 'Steak'},
+    {value: 'pizza-1', viewValue: 'Pizza'},
+    {value: 'tacos-2', viewValue: 'Tacos'},
+  ];
+
+  protected cars: Car[] = [
+    {value: 'volvo', viewValue: 'Volvo'},
+    {value: 'saab', viewValue: 'Saab'},
+    {value: 'mercedes', viewValue: 'Mercedes'},
+  ];
+}

src/components-examples/material/select/select-form/select-form-example.ts

@@ -15,7 +15,7 @@ interface Car {
 }
 
 /**
- * @title Select in a form
+ * @title Select in a form (template-driven forms)
  */
 @Component({
   selector: 'select-form-example',

src/components-examples/material/select/select-hint-error-signal-form/select-hint-error-signal-form-example.html

@@ -0,0 +1,32 @@
+<h4>mat select</h4>
+<mat-form-field>
+  <mat-label>Favorite animal</mat-label>
+  <mat-select [formField]="animalControl">
+    <mat-option>--</mat-option>
+    @for (animal of animals; track animal) {
+      <mat-option [value]="animal.name">{{animal.name}}</mat-option>
+    }
+  </mat-select>
+  @if (animalControl().getError('required')) {
+    <mat-error>Please choose an animal</mat-error>
+  }
+  @if (animalSound(); as animalSound) {
+    <mat-hint>{{animalSound}}</mat-hint>
+  }
+</mat-form-field>
+
+<h4>native html select</h4>
+<mat-form-field>
+  <mat-label>Select your car (required)</mat-label>
+  <select matNativeControl  [formField]="selectFormControl">
+    <option label="--select something --"></option>
+    <option value="saab">Saab</option>
+    <option value="mercedes">Mercedes</option>
+    <option value="audi">Audi</option>
+  </select>
+  @if (selectFormControl().getError('required')) {
+    <mat-error>This field is required</mat-error>
+  }
+  <mat-hint>You can pick up your favorite car here</mat-hint>
+</mat-form-field>
+

src/components-examples/material/select/select-hint-error-signal-form/select-hint-error-signal-form-example.ts

@@ -0,0 +1,36 @@
+import {Component, computed, signal} from '@angular/core';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {form, FormField, required} from '@angular/forms/signals';
+
+interface Animal {
+  name: string;
+  sound: string;
+}
+
+/** @title Select with form field features (signal forms) */
+@Component({
+  selector: 'select-hint-error-signal-form-example',
+  templateUrl: 'select-hint-error-signal-form-example.html',
+  imports: [MatFormFieldModule, MatSelectModule, FormField, MatInputModule],
+})
+export class SelectHintErrorSignalFormExample {
+  protected animalControl = form(signal<string>(''), p => {
+    required(p);
+  });
+  protected selectFormControl = form(signal(''), p => {
+    required(p);
+  });
+
+  protected animalSound = computed<string | undefined>(
+    () => this.animals.find(a => a.name === this.animalControl().value())?.sound,
+  );
+
+  protected animals: Animal[] = [
+    {name: 'Dog', sound: 'Woof!'},
+    {name: 'Cat', sound: 'Meow!'},
+    {name: 'Cow', sound: 'Moo!'},
+    {name: 'Fox', sound: 'Wa-pa-pa-pa-pa-pa-pow!'},
+  ];
+}

src/components-examples/material/select/select-multiple-signal-form/select-multiple-signal-form-example.html

@@ -0,0 +1,8 @@
+<mat-form-field>
+  <mat-label>Toppings</mat-label>
+  <mat-select [formField]="toppings" multiple>
+    @for (topping of toppingList; track topping) {
+      <mat-option [value]="topping">{{topping}}</mat-option>
+    }
+  </mat-select>
+</mat-form-field>

src/components-examples/material/select/select-multiple-signal-form/select-multiple-signal-form-example.ts

@@ -0,0 +1,15 @@
+import {Component, signal} from '@angular/core';
+import {MatSelectModule} from '@angular/material/select';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {form, FormField} from '@angular/forms/signals';
+
+/** @title Select with multiple selection (signal forms) */
+@Component({
+  selector: 'select-multiple-signal-form-example',
+  templateUrl: 'select-multiple-signal-form-example.html',
+  imports: [MatFormFieldModule, MatSelectModule, FormField],
+})
+export class SelectMultipleSignalFormExample {
+  toppings = form(signal<string[]>([]));
+  toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'] as const;
+}

src/components-examples/material/select/select-multiple/select-multiple-example.ts

@@ -10,6 +10,6 @@ import {MatFormFieldModule} from '@angular/material/form-field';
   imports: [MatFormFieldModule, MatSelectModule, FormsModule, ReactiveFormsModule],
 })
 export class SelectMultipleExample {
-  toppings = new FormControl('');
+  toppings = new FormControl<string[]>([]);
   toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
 }

src/material/select/select.md

@@ -35,7 +35,7 @@ Including `FormField` (signal forms), `FormsModule` (`NgModel`) and `ReactiveFor
 `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) -->
+<!-- example(select-form-signal-form) -->
 
 ### Form field features
 
@@ -44,7 +44,7 @@ include error messages, hint text, prefix & suffix, and theming. For additional
 these features, see the
 [form field documentation](https://material.angular.dev/components/form-field/overview).
 
-<!-- example(select-hint-error) -->
+<!-- example(select-hint-error-signal-form) -->
 
 ### Setting a static placeholder
 
@@ -58,11 +58,17 @@ In some cases that `<mat-form-field>` may use the placeholder as the label (see
 
 It is possible to disable the entire select or individual options in the select by using the
 disabled property on the `<select>` or `<mat-select>` and the `<option>` or `<mat-option>` elements respectively.
+
+For signal forms, the [`disabled`](https://angular.dev/api/forms/signals/disabled) rule sets the 
+disabled behavior of the `<select>` or `<mat-select>`, and the disabled property should not be bound 
+to the selects in the template. However, individual `<option>` or `<mat-option>` elements can be 
+bound as disabled in the template.
+
 When working with Reactive Forms, the select component can be disabled/enabled via form controls.
 This can be accomplished by creating a `FormControl` with the disabled property
 `FormControl({value: '', disabled: true})` or using `FormControl.enable()`, `FormControl.disable()`.
 
-<!-- example(select-disabled) -->
+<!-- example(select-disabled-signal-form) -->
 
 ### Resetting the select value
 
@@ -99,7 +105,7 @@ Using multiple selection with a native select element (`<select multiple>`) is d
 inside `<mat-form-field>`, as the inline listbox appearance is inconsistent with other
 Material Design components.
 
-<!-- example(select-multiple) -->
+<!-- example(select-multiple-signal-form) -->
 
 ### Customizing the trigger label