docs: add example that presets form values (#276)

Author: mleimer

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

@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { MaterialModule } from '../material.module';
 import { MaterialFormsComponent } from './04-forms-with-material';
 
+
 test('is possible to fill in a form and verify error messages (with the help of jest-dom https://testing-library.com/docs/ecosystem-jest-dom)', async () => {
   const { fixture } = await render(MaterialFormsComponent, {
     imports: [MaterialModule],
@@ -37,12 +38,40 @@ 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');
 
   const form = screen.getByRole('form');
   expect(form).toHaveFormValues({
     name: 'Tim',
     score: 7,
   });
-
   expect((fixture.componentInstance as MaterialFormsComponent).form?.get('color')?.value).toBe('G');
 });
+
+test('set and show pre-set form values', async () => {
+  const { fixture, detectChanges } = await render(MaterialFormsComponent, {
+    imports: [MaterialModule],
+  });
+
+  fixture.componentInstance.form.setValue({
+    name: 'Max',
+    score: 4,
+    color: 'B'
+  })
+  detectChanges();
+
+  const nameControl = screen.getByLabelText(/name/i);
+  const scoreControl = screen.getByRole('spinbutton', { name: /score/i });
+  const colorControl = screen.getByRole('combobox', { name: /color/i });
+
+  expect(nameControl).toHaveValue('Max');
+  expect(scoreControl).toHaveValue(4);
+  expect(colorControl).toHaveTextContent('Blue');
+
+  const form = screen.getByRole('form');
+  expect(form).toHaveFormValues({
+    name: 'Max',
+    score: 4,
+  });
+  expect((fixture.componentInstance as MaterialFormsComponent).form?.get('color')?.value).toBe('B');
+});

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

@@ -24,6 +24,9 @@ import { FormBuilder, Validators } from '@angular/forms';
 
       <mat-form-field>
         <mat-select placeholder="Color" name="color" formControlName="color">
+          <mat-select-trigger>
+            {{ colorControlDisplayValue }}
+          </mat-select-trigger>
           <mat-option value="">---</mat-option>
           <mat-option *ngFor="let color of colors" [value]="color.id">{{ color.value }}</mat-option>
         </mat-select>
@@ -60,11 +63,16 @@ export class MaterialFormsComponent {
   form = this.formBuilder.group({
     name: ['', Validators.required],
     score: [0, [Validators.min(1), Validators.max(10)]],
-    color: ['', Validators.required],
+    color: [null, Validators.required],
   });
 
   constructor(private formBuilder: FormBuilder) {}
 
+  get colorControlDisplayValue(): string | undefined {
+    const selectedId = this.form.get('color')?.value;
+    return this.colors.filter(color => color.id === selectedId)[0]?.value;
+  }
+
   get formErrors() {
     return Object.keys(this.form.controls)
       .map((formKey) => {