add checkbox example (#363)

Author: timdeschryver

apps/example-app/src/app/examples/04-forms-with-material.spec.ts

@@ -13,22 +13,30 @@ test('is possible to fill in a form and verify error messages (with the help of
   const scoreControl = screen.getByRole('spinbutton', { name: /score/i });
   const colorControl = screen.getByPlaceholderText(/color/i);
   const dateControl = screen.getByRole('textbox', { name: /Choose a date/i });
+  const checkboxControl = screen.getByRole('checkbox', { name: /agree/i });
 
   const errors = screen.getByRole('alert');
 
   expect(errors).toContainElement(screen.queryByText('name is required'));
   expect(errors).toContainElement(screen.queryByText('score must be greater than 1'));
   expect(errors).toContainElement(screen.queryByText('color is required'));
+  expect(errors).toContainElement(screen.queryByText('agree is required'));
 
   userEvent.type(nameControl, 'Tim');
   userEvent.clear(scoreControl);
   userEvent.type(scoreControl, '12');
   userEvent.click(colorControl);
   userEvent.click(screen.getByText(/green/i));
 
+  expect(checkboxControl).not.toBeChecked();
+  userEvent.click(checkboxControl);
+  expect(checkboxControl).toBeChecked();
+  expect(checkboxControl).toBeValid();
+
   expect(screen.queryByText('name is required')).not.toBeInTheDocument();
   expect(screen.getByText('score must be lesser than 10')).toBeInTheDocument();
   expect(screen.queryByText('color is required')).not.toBeInTheDocument();
+  expect(screen.queryByText('agree is required')).not.toBeInTheDocument();
 
   expect(scoreControl).toBeInvalid();
   userEvent.clear(scoreControl);
@@ -42,6 +50,7 @@ test('is possible to fill in a form and verify error messages (with the help of
   expect(nameControl).toHaveValue('Tim');
   expect(scoreControl).toHaveValue(7);
   expect(colorControl).toHaveTextContent('Green');
+  expect(checkboxControl).toBeChecked();
 
   const form = screen.getByRole('form');
   expect(form).toHaveFormValues({
@@ -50,6 +59,7 @@ test('is possible to fill in a form and verify error messages (with the help of
   });
 
   // material doesn't add these to the form
+  expect((fixture.componentInstance as MaterialFormsComponent).form?.get('agree')?.value).toBe(true);
   expect((fixture.componentInstance as MaterialFormsComponent).form?.get('color')?.value).toBe('G');
   expect((fixture.componentInstance as MaterialFormsComponent).form?.get('date')?.value).toEqual(new Date(2022, 7, 11));
 });
@@ -64,22 +74,29 @@ test('set and show pre-set form values', async () => {
     score: 4,
     color: 'B',
     date: new Date(2022, 7, 11),
+    agree: true,
   });
   detectChanges();
 
   const nameControl = screen.getByLabelText(/name/i);
   const scoreControl = screen.getByRole('spinbutton', { name: /score/i });
   const colorControl = screen.getByPlaceholderText(/color/i);
+  const checkboxControl = screen.getByRole('checkbox', { name: /agree/i });
 
   expect(nameControl).toHaveValue('Max');
   expect(scoreControl).toHaveValue(4);
   expect(colorControl).toHaveTextContent('Blue');
+  expect(checkboxControl).toBeChecked();
+  userEvent.click(checkboxControl);
 
   const form = screen.getByRole('form');
   expect(form).toHaveFormValues({
     name: 'Max',
     score: 4,
   });
+
+  // material doesn't add these to the form
+  expect((fixture.componentInstance as MaterialFormsComponent).form?.get('agree')?.value).toBe(false);
   expect((fixture.componentInstance as MaterialFormsComponent).form?.get('color')?.value).toBe('B');
   expect((fixture.componentInstance as MaterialFormsComponent).form?.get('date')?.value).toEqual(new Date(2022, 7, 11));
 });

apps/example-app/src/app/examples/04-forms-with-material.ts

@@ -10,6 +10,8 @@ import { UntypedFormBuilder, Validators } from '@angular/forms';
         <input matInput placeholder="Name" name="name" formControlName="name" required />
       </mat-form-field>
 
+      <mat-checkbox formControlName="agree">I Agree</mat-checkbox>
+
       <mat-form-field>
         <mat-label>Score</mat-label>
         <input
@@ -76,6 +78,7 @@ export class MaterialFormsComponent {
     score: [0, [Validators.min(1), Validators.max(10)]],
     color: [null, Validators.required],
     date: [null, Validators.required],
+    agree: [null, Validators.requiredTrue],
   });
 
   constructor(private formBuilder: UntypedFormBuilder) {}

apps/example-app/src/app/material.module.ts

@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core';
 
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
 
 @NgModule({
-  exports: [MatInputModule, MatSelectModule, MatDatepickerModule, MatNativeDateModule],
+  exports: [MatInputModule, MatSelectModule, MatDatepickerModule, MatNativeDateModule, MatCheckboxModule],
 })
 export class MaterialModule {}