docs: add mat datepicker example (#312)

Author: timdeschryver

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

@@ -12,6 +12,8 @@ test('is possible to fill in a form and verify error messages (with the help of
   const nameControl = screen.getByLabelText(/name/i);
   const scoreControl = screen.getByRole('spinbutton', { name: /score/i });
   const colorControl = screen.getByRole('combobox', { name: /color/i });
+  const dateControl = screen.getByRole('textbox', { name: /Choose a date/i });
+
   const errors = screen.getByRole('alert');
 
   expect(errors).toContainElement(screen.queryByText('name is required'));
@@ -33,6 +35,8 @@ test('is possible to fill in a form and verify error messages (with the help of
   userEvent.type(scoreControl, '7');
   expect(scoreControl).toBeValid();
 
+  userEvent.type(dateControl, '08/11/2022');
+
   expect(errors).not.toBeInTheDocument();
 
   expect(nameControl).toHaveValue('Tim');
@@ -44,7 +48,10 @@ test('is possible to fill in a form and verify error messages (with the help of
     name: 'Tim',
     score: 7,
   });
+
+  // material doesn't add these to the form
   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));
 });
 
 test('set and show pre-set form values', async () => {
@@ -56,6 +63,7 @@ test('set and show pre-set form values', async () => {
     name: 'Max',
     score: 4,
     color: 'B',
+    date: new Date(2022, 7, 11),
   });
   detectChanges();
 
@@ -73,4 +81,5 @@ test('set and show pre-set form values', async () => {
     score: 4,
   });
   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

@@ -32,6 +32,14 @@ import { UntypedFormBuilder, Validators } from '@angular/forms';
         </mat-select>
       </mat-form-field>
 
+      <mat-form-field appearance="fill">
+        <mat-label>Choose a date</mat-label>
+        <input matInput [matDatepicker]="picker" formControlName="date" />
+        <mat-hint>MM/DD/YYYY</mat-hint>
+        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+        <mat-datepicker #picker></mat-datepicker>
+      </mat-form-field>
+
       <div role="alert" *ngIf="formErrors.length">
         <p *ngFor="let error of formErrors">{{ error }}</p>
       </div>
@@ -64,13 +72,14 @@ export class MaterialFormsComponent {
     name: ['', Validators.required],
     score: [0, [Validators.min(1), Validators.max(10)]],
     color: [null, Validators.required],
+    date: [null, Validators.required],
   });
 
   constructor(private formBuilder: UntypedFormBuilder) {}
 
   get colorControlDisplayValue(): string | undefined {
     const selectedId = this.form.get('color')?.value;
-    return this.colors.filter(color => color.id === selectedId)[0]?.value;
+    return this.colors.filter((color) => color.id === selectedId)[0]?.value;
   }
 
   get formErrors() {

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

@@ -2,8 +2,10 @@ import { NgModule } from '@angular/core';
 
 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],
+  exports: [MatInputModule, MatSelectModule, MatDatepickerModule, MatNativeDateModule],
 })
 export class MaterialModule {}