docs(material/chips): clean up forms examples

Cleans up the examples showing how to use chips with the forms module so that they have a single source of truth and better match our coding standards.

Fixes #33179.

Author: crisbeto

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

@@ -3,8 +3,8 @@ <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 reactiveKeywords(); track keyword) {
-      <mat-chip-row (removed)="removeReactiveKeyword(keyword)">
+    @for (keyword of formControl.value; track keyword) {
+      <mat-chip-row (removed)="removeKeyword(keyword)">
         {{keyword}}
       <button matChipRemove [attr.aria-label]="'remove reactive form' + keyword">
         <mat-icon>cancel</mat-icon>
@@ -15,7 +15,7 @@ <h4>Chips inside of a Reactive form</h4>
     <input
       placeholder="New keyword..."
       [matChipInputFor]="reactiveChipGrid"
-      (matChipInputTokenEnd)="addReactiveKeyword($event)"
+      (matChipInputTokenEnd)="addKeyword($event)"
     />
   </mat-form-field>
 </section>

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

@@ -1,5 +1,5 @@
 import {LiveAnnouncer} from '@angular/cdk/a11y';
-import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatChipInputEvent, MatChipsModule} from '@angular/material/chips';
@@ -23,34 +23,31 @@ import {MatIconModule} from '@angular/material/icon';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChipsReactiveFormExample {
-  readonly reactiveKeywords = signal(['angular', 'how-to', 'tutorial', 'accessibility']);
-  readonly formControl = new FormControl(['angular']);
+  private _announcer = inject(LiveAnnouncer);
 
-  announcer = inject(LiveAnnouncer);
+  readonly formControl = new FormControl(['angular', 'how-to', 'tutorial', 'accessibility'], {
+    nonNullable: true,
+  });
 
-  removeReactiveKeyword(keyword: string) {
-    this.reactiveKeywords.update(keywords => {
-      const index = keywords.indexOf(keyword);
-      if (index < 0) {
-        return keywords;
-      }
-
-      keywords.splice(index, 1);
-      this.announcer.announce(`removed ${keyword} from reactive form`);
-      return [...keywords];
-    });
-  }
-
-  addReactiveKeyword(event: MatChipInputEvent): void {
+  addKeyword(event: MatChipInputEvent): void {
     const value = (event.value || '').trim();
 
-    // Add our keyword
     if (value) {
-      this.reactiveKeywords.update(keywords => [...keywords, value]);
-      this.announcer.announce(`added ${value} to reactive form`);
+      this.formControl.setValue([...this.formControl.value, value]);
+      this._announcer.announce(`added ${value} to reactive form`);
     }
 
-    // Clear the input value
-    event.chipInput!.clear();
+    event.chipInput.clear();
+  }
+
+  removeKeyword(keyword: string) {
+    const keywords = this.formControl.value;
+    const index = keywords.lastIndexOf(keyword);
+
+    if (index > -1) {
+      keywords.splice(index, 1);
+      this.formControl.setValue([...keywords]);
+      this._announcer.announce(`removed ${keyword} from reactive form`);
+    }
   }
 }

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

@@ -2,9 +2,9 @@
   <h4>Chips inside of a Template-driven form</h4>
   <mat-form-field class="example-form-field">
     <mat-label>Video keywords</mat-label>
-    <mat-chip-grid #templateChipGrid aria-label="Enter template form keywords" [(ngModel)]="templateKeywords">
-    @for (keyword of templateKeywords(); track keyword) {
-      <mat-chip-row (removed)="removeTemplateKeyword(keyword)">
+    <mat-chip-grid #templateChipGrid aria-label="Enter template form keywords" [(ngModel)]="keywords">
+    @for (keyword of keywords(); track keyword) {
+      <mat-chip-row (removed)="removeKeyword(keyword)">
         {{keyword}}
       <button matChipRemove [attr.aria-label]="'remove template form' + keyword">
         <mat-icon>cancel</mat-icon>
@@ -15,7 +15,7 @@ <h4>Chips inside of a Template-driven form</h4>
     <input
       placeholder="New keyword..."
       [matChipInputFor]="templateChipGrid"
-      (matChipInputTokenEnd)="addTemplateKeyword($event)"
+      (matChipInputTokenEnd)="addKeyword($event)"
     />
   </mat-form-field>
 </section>

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

@@ -17,33 +17,30 @@ import {MatIconModule} from '@angular/material/icon';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChipsTemplateFormExample {
-  readonly templateKeywords = signal(['angular', 'how-to', 'tutorial', 'accessibility']);
+  private _announcer = inject(LiveAnnouncer);
+  readonly keywords = signal(['angular', 'how-to', 'tutorial', 'accessibility']);
 
-  announcer = inject(LiveAnnouncer);
+  addKeyword(event: MatChipInputEvent): void {
+    const value = (event.value || '').trim();
+
+    if (value) {
+      this.keywords.update(keywords => [...keywords, value]);
+      this._announcer.announce(`added ${value} to template form`);
+    }
 
-  removeTemplateKeyword(keyword: string) {
-    this.templateKeywords.update(keywords => {
+    event.chipInput.clear();
+  }
+
+  removeKeyword(keyword: string) {
+    this.keywords.update(keywords => {
       const index = keywords.indexOf(keyword);
       if (index < 0) {
         return keywords;
       }
 
       keywords.splice(index, 1);
-      this.announcer.announce(`removed ${keyword} from template form`);
+      this._announcer.announce(`removed ${keyword} from template form`);
       return [...keywords];
     });
   }
-
-  addTemplateKeyword(event: MatChipInputEvent): void {
-    const value = (event.value || '').trim();
-
-    // Add our keyword
-    if (value) {
-      this.templateKeywords.update(keywords => [...keywords, value]);
-      this.announcer.announce(`added ${value} to template form`);
-    }
-
-    // Clear the input value
-    event.chipInput!.clear();
-  }
 }