docs: add example for using chip-list with form control

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,