docs: add example for using chip-list with form control (#22814)

This clarifies how a chip-list can be used with a form control.
It highlights how a chip list can be disabled. The form control
is placed on the chip input is some cases while it should be
on the chip list, as otherwise the disabled styling does not
apply to the containing form field.

Fixes #19118.

(cherry picked from commit a59aaa3)

Author: devversion

src/components-examples/material/chips/BUILD.bazel

@@ -18,6 +18,7 @@ ng_module(
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/material/autocomplete",
+        "//src/material/button",
         "//src/material/chips",
         "//src/material/chips/testing",
         "//src/material/form-field",

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

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

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

@@ -0,0 +1,23 @@
+<div class="example-button-container">
+  <button mat-raised-button (click)="formControl.disable()">Disable form control</button>
+  <button mat-raised-button (click)="formControl.enable()">Enable form control</button>
+</div>
+
+<p>
+  Selected keywords: {{formControl.value}}
+</p>
+
+<mat-form-field class="example-chip-list">
+  <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)">
+      {{keyword}}
+    </mat-chip>
+    <input
+      placeholder="New keyword..."
+      [matChipInputFor]="chipList"
+      (matChipInputTokenEnd)="addKeywordFromInput($event)">
+  </mat-chip-list>
+</mat-form-field>

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

@@ -0,0 +1,27 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {MatChipInputEvent} from '@angular/material/chips';
+
+/**
+ * @title Chips with form control
+ */
+@Component({
+  selector: 'chips-form-control-example',
+  templateUrl: 'chips-form-control-example.html',
+  styleUrls: ['chips-form-control-example.css'],
+})
+export class ChipsFormControlExample {
+  keywords = new Set(['angular', 'how-to', 'tutorial']);
+  formControl = new FormControl();
+
+  addKeywordFromInput(event: MatChipInputEvent) {
+    if (event.value) {
+      this.keywords.add(event.value);
+      event.chipInput!.clear();
+    }
+  }
+
+  removeKeyword(keyword: string) {
+    this.keywords.delete(keyword);
+  }
+}

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

@@ -12,6 +12,8 @@ import {ChipsInputExample} from './chips-input/chips-input-example';
 import {ChipsOverviewExample} from './chips-overview/chips-overview-example';
 import {ChipsStackedExample} from './chips-stacked/chips-stacked-example';
 import {ChipsHarnessExample} from './chips-harness/chips-harness-example';
+import {ChipsFormControlExample} from './chips-form-control/chips-form-control-example';
+import {MatButtonModule} from '@angular/material/button';
 
 export {
   ChipsAutocompleteExample,
@@ -20,6 +22,7 @@ export {
   ChipsOverviewExample,
   ChipsStackedExample,
   ChipsHarnessExample,
+  ChipsFormControlExample
 };
 
 const EXAMPLES = [
@@ -29,13 +32,15 @@ const EXAMPLES = [
   ChipsOverviewExample,
   ChipsStackedExample,
   ChipsHarnessExample,
+  ChipsFormControlExample,
 ];
 
 @NgModule({
   imports: [
     CommonModule,
     DragDropModule,
     MatAutocompleteModule,
+    MatButtonModule,
     MatChipsModule,
     MatIconModule,
     MatFormFieldModule,