docs: clarify value of the form control in the chips-form-control example (#22995)

We recently added an example for chips with a form control. This example
should clarify how the chip list can interact with a form control.

It seems like it is not quite clear what value the form control
represents, or how a chip can be "selected". This has been improved
as per this commit.

Fixes #22933.

Author: devversion

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

@@ -4,15 +4,17 @@
 </div>
 
 <p>
-  Selected keywords: {{formControl.value}}
+  <i>Select a focused chip by pressing <code>SPACE</code></i>
 </p>
 
 <mat-form-field class="example-chip-list" appearance="fill">
   <mat-label>Video keywords</mat-label>
   <mat-chip-list #chipList aria-label="Video keywords" multiple [formControl]="formControl">
     <mat-chip
-      *ngFor="let keyword of keywords"
-      (removed)="removeKeyword(keyword)">
+        *ngFor="let keyword of keywords"
+        [selected]="keyword"
+        [value]="keyword"
+        (removed)="removeKeyword(keyword)">
       {{keyword}}
     </mat-chip>
     <input
@@ -21,3 +23,7 @@
       (matChipInputTokenEnd)="addKeywordFromInput($event)">
   </mat-chip-list>
 </mat-form-field>
+
+<p>
+  <b>The following keywords are selected:</b> {{formControl.value}}
+</p>

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

@@ -12,7 +12,7 @@ import {MatChipInputEvent} from '@angular/material/chips';
 })
 export class ChipsFormControlExample {
   keywords = new Set(['angular', 'how-to', 'tutorial']);
-  formControl = new FormControl();
+  formControl = new FormControl(['angular']);
 
   addKeywordFromInput(event: MatChipInputEvent) {
     if (event.value) {