docs: add signal forms examples to Checkbox and Chips

Author: msmallest

src/components-examples/material/checkbox/checkbox-signal-forms/checkbox-signal-forms-example.css

@@ -0,0 +1,3 @@
+.example-section {
+  margin: 12px 0;
+}

src/components-examples/material/checkbox/checkbox-signal-forms/checkbox-signal-forms-example.html

@@ -0,0 +1,11 @@
+<section class="example-section">
+  <h4>Select your toppings:</h4>
+  <p><mat-checkbox [formField]="toppingsForm.pepperoni">Pepperoni</mat-checkbox></p>
+  <p><mat-checkbox [formField]="toppingsForm.extracheese">Extra Cheese</mat-checkbox></p>
+  <p><mat-checkbox [formField]="toppingsForm.mushroom">Mushroom</mat-checkbox></p>
+</section>
+
+<section class="example-section">
+  <h4>You chose:</h4>
+  {{toppingsForm().value() | json}}
+</section>

src/components-examples/material/checkbox/checkbox-signal-forms/checkbox-signal-forms-example.ts

@@ -0,0 +1,21 @@
+import {JsonPipe} from '@angular/common';
+import {Component, signal} from '@angular/core';
+import {form, FormField} from '@angular/forms/signals';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+
+/** @title Checkboxes with signal forms */
+@Component({
+  selector: 'checkbox-signal-forms-example',
+  templateUrl: 'checkbox-signal-forms-example.html',
+  styleUrl: 'checkbox-signal-forms-example.css',
+  imports: [FormField, MatCheckboxModule, JsonPipe],
+})
+export class CheckboxSignalFormsExample {
+  readonly toppingsFormModel = signal({
+    pepperoni: false,
+    extracheese: false,
+    mushroom: false,
+  });
+
+  readonly toppingsForm = form(this.toppingsFormModel);
+}

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

@@ -2,3 +2,4 @@ export {CheckboxConfigurableExample} from './checkbox-configurable/checkbox-conf
 export {CheckboxHarnessExample} from './checkbox-harness/checkbox-harness-example';
 export {CheckboxOverviewExample} from './checkbox-overview/checkbox-overview-example';
 export {CheckboxReactiveFormsExample} from './checkbox-reactive-forms/checkbox-reactive-forms-example';
+export {CheckboxSignalFormsExample} from './checkbox-signal-forms/checkbox-signal-forms-example';

src/components-examples/material/chips/chips-form-control/chips-form-control-example.html

@@ -8,7 +8,7 @@
 <mat-form-field class="example-form-field">
   <mat-label>Video keywords</mat-label>
   <mat-chip-grid #chipGrid aria-label="Enter keywords" [formControl]="formControl">
-    @for (keyword of keywords(); track keyword) {
+    @for (keyword of keywords(); track $index) {
       <mat-chip-row (removed)="removeKeyword(keyword)">
         {{keyword}}
         <button matChipRemove [attr.aria-label]="'remove ' + keyword">

src/components-examples/material/chips/chips-form-field/chips-form-field-example.css

@@ -0,0 +1,7 @@
+.example-button-container > button {
+    margin: 0 12px;
+}
+
+.example-form-field {
+    width: 100%;
+}

src/components-examples/material/chips/chips-form-field/chips-form-field-example.html

@@ -0,0 +1,31 @@
+<div class="example-button-container">
+  <button matButton="elevated" (click)="keywordsFormModel.update(m => ({ ...m, enabled: false }))">
+    Disable form control
+  </button>
+  <button matButton="elevated" (click)="keywordsFormModel.update(m => ({ ...m, enabled: true }))">
+    Enable form control
+  </button>
+</div>
+<p>
+  <em>Enter video keywords</em>
+</p>
+<mat-form-field class="example-form-field">
+  <mat-label>Video keywords</mat-label>
+  <mat-chip-grid #chipGrid aria-label="Enter keywords" [formField]="keywordsForm.words">
+    @for (keyword of keywordsForm.words().value(); track $index) {
+      <mat-chip-row (removed)="removeKeyword(keyword)">
+        {{ keyword }}
+        <button matChipRemove [attr.aria-label]="'remove ' + keyword">
+          <mat-icon>cancel</mat-icon>
+        </button>
+      </mat-chip-row>
+    }
+  </mat-chip-grid>
+  <input
+    placeholder="New keyword..."
+    [matChipInputFor]="chipGrid"
+    (matChipInputTokenEnd)="add($event)"
+  />
+</mat-form-field>
+
+<p><strong>The following keywords are entered:</strong> {{ keywordsForm.words().value() }}</p>

src/components-examples/material/chips/chips-form-field/chips-form-field-example.ts

@@ -0,0 +1,56 @@
+import {LiveAnnouncer} from '@angular/cdk/a11y';
+import {Component, inject, signal} from '@angular/core';
+import {disabled, form, FormField} from '@angular/forms/signals';
+import {MatButtonModule} from '@angular/material/button';
+import {MatChipInputEvent, MatChipsModule} from '@angular/material/chips';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
+
+/**
+ * @title Chips with form field
+ */
+@Component({
+  selector: 'chips-form-field-example',
+  templateUrl: 'chips-form-field-example.html',
+  styleUrl: 'chips-form-field-example.css',
+  imports: [FormField, MatButtonModule, MatFormFieldModule, MatChipsModule, MatIconModule],
+})
+export class ChipsFormFieldExample {
+  readonly keywordsFormModel = signal({
+    words: ['angular', 'how-to', 'tutorial', 'accessibility'],
+    enabled: true,
+  });
+
+  readonly keywordsForm = form(this.keywordsFormModel, p => {
+    disabled(p, {
+      when: ({valueOf}) => !valueOf(p.enabled),
+    });
+  });
+
+  announcer = inject(LiveAnnouncer);
+
+  protected removeKeyword(keyword: string) {
+    this.keywordsFormModel.update(keywords => {
+      const index = keywords.words.indexOf(keyword);
+      if (index < 0) {
+        return keywords;
+      }
+
+      keywords.words.splice(index, 1);
+      this.announcer.announce(`removed ${keyword}`);
+      return {...keywords};
+    });
+  }
+
+  protected add(event: MatChipInputEvent): void {
+    const value = (event.value || '').trim();
+
+    // Add our keyword
+    if (value) {
+      this.keywordsFormModel.update(keywords => ({...keywords, words: [...keywords.words, value]}));
+    }
+
+    // Clear the input value
+    event.chipInput!.clear();
+  }
+}

src/components-examples/material/chips/chips-reactive-form/chips-reactive-form-example.html

@@ -3,7 +3,7 @@ <h4>Chips inside of a Reactive form</h4>
   <mat-form-field class="example-form-field">
     <mat-label>Video keywords</mat-label>
     <mat-chip-grid #reactiveChipGrid aria-label="Enter reactive form keywords" [formControl]="formControl">
-    @for (keyword of formControl.value; track keyword) {
+    @for (keyword of formControl.value; track $index) {
       <mat-chip-row (removed)="removeKeyword(keyword)">
         {{keyword}}
       <button matChipRemove [attr.aria-label]="'remove reactive form' + keyword">

src/components-examples/material/chips/chips-signal-form/chips-signal-form-example.css

@@ -0,0 +1,3 @@
+.example-form-field {
+    width: 100%;
+}