docs(material/checkbox): add example of using mat-checkbox with reactive forms (#22796)

(cherry picked from commit 47b7357)

Author: mmalerba

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

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

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

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

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

@@ -0,0 +1,20 @@
+import {Component} from '@angular/core';
+import {FormBuilder, FormGroup} from '@angular/forms';
+
+/** @title Checkboxes with reactive forms */
+@Component({
+  selector: 'checkbox-reactive-forms-example',
+  templateUrl: 'checkbox-reactive-forms-example.html',
+  styleUrls: ['checkbox-reactive-forms-example.css']
+})
+export class CheckboxReactiveFormsExample {
+  toppings: FormGroup;
+
+  constructor(fb: FormBuilder) {
+    this.toppings = fb.group({
+      pepperoni: false,
+      extracheese: false,
+      mushroom: false
+    });
+  }
+}

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

@@ -1,23 +1,28 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatCardModule} from '@angular/material/card';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatRadioModule} from '@angular/material/radio';
 import {CheckboxConfigurableExample} from './checkbox-configurable/checkbox-configurable-example';
-import {CheckboxOverviewExample} from './checkbox-overview/checkbox-overview-example';
 import {CheckboxHarnessExample} from './checkbox-harness/checkbox-harness-example';
+import {CheckboxOverviewExample} from './checkbox-overview/checkbox-overview-example';
+import {
+  CheckboxReactiveFormsExample
+} from './checkbox-reactive-forms/checkbox-reactive-forms-example';
 
 export {
   CheckboxConfigurableExample,
   CheckboxOverviewExample,
   CheckboxHarnessExample,
+  CheckboxReactiveFormsExample,
 };
 
 const EXAMPLES = [
   CheckboxConfigurableExample,
   CheckboxOverviewExample,
   CheckboxHarnessExample,
+  CheckboxReactiveFormsExample,
 ];
 
 @NgModule({
@@ -27,6 +32,7 @@ const EXAMPLES = [
     MatCheckboxModule,
     MatRadioModule,
     FormsModule,
+    ReactiveFormsModule,
   ],
   declarations: EXAMPLES,
   exports: EXAMPLES,