docs: add signal form example for mat-select

Author: msmallest

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

@@ -2,6 +2,7 @@ export {SelectCustomTriggerExample} from './select-custom-trigger/select-custom-
 export {SelectDisabledExample} from './select-disabled/select-disabled-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 {SelectNoRippleExample} from './select-no-ripple/select-no-ripple-example';

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',