feat(popover-edit): Helper class to reduce form state preservation boilerplate

Author: kseamon

src/cdk-experimental/popover-edit/form-value-container.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export interface Entry<FormValue> {
+  value?: FormValue;
+}
+
+export class FormValueContainer<Key extends object, FormValue> {
+  private _formValues = new WeakMap<Key, Entry<FormValue>>();
+
+  for(key: Key): Entry<FormValue> {
+    const _formValues = this._formValues;
+
+    let entry = _formValues.get(key);
+    if (!entry) {
+      entry = {};
+      _formValues.set(key, entry);
+    }
+
+    return entry;
+  }
+}

src/cdk-experimental/popover-edit/lens-directives.ts

@@ -49,7 +49,7 @@ export class CdkEditControl<FormValue> implements OnDestroy, OnInit {
 
   /**
    * A two-way binding for storing unsubmitted form state. If not provided
-   * then form state will be discarded on close. The CdkEditControlPeristBy directive is offered
+   * then form state will be discarded on close. The PeristBy directive is offered
    * as a convenient shortcut for these bindings.
    */
   preservedFormValue?: FormValue;
@@ -126,15 +126,6 @@ export class CdkEditControl<FormValue> implements OnDestroy, OnInit {
   }
 }
 
-@Directive({
-  selector: 'form[cdkEditControl][cdkEditControlPeristBy]',
-  host: {
-    preservedFormValue
-  }
-})
-export class CdkEditControlPersistBy<Key, FormValue> {
-}
-
 /** Reverts the form to its initial or previously submitted state on click. */
 @Directive({
   selector: 'button[cdkEditRevert]',

src/cdk-experimental/popover-edit/public-api.ts

@@ -9,6 +9,7 @@
 export * from './edit-event-dispatcher';
 export * from './edit-ref';
 export * from './focus-dispatcher';
+export * from './form-value-container';
 export * from './lens-directives';
 export * from './popover-edit-module';
 export * from './popover-edit-position-strategy-factory';

src/material-examples/popover-edit-mat-table/popover-edit-mat-table-example.html

@@ -8,8 +8,7 @@
       <form #f="ngForm"
           matEditLens
           (ngSubmit)="onSubmitWeight(element, f)"
-          [matEditLensPreservedFormValue]="preservedWeightValues.get(element)"
-          (matEditLensPreservedFormValueChange)="preservedWeightValues.set(element, $event)">
+          [(matEditLensPreservedFormValue)]="weightValues.for(element).value">
         <div mat-edit-content>
           <mat-form-field>
             <input matInput type="number" [ngModel]="element.weight" name="weight" required>
@@ -38,8 +37,7 @@
           <form #f="ngForm"
               matEditLens
               (ngSubmit)="onSubmitName(element, f)"
-              [matEditLensPreservedFormValue]="preservedNameValues.get(element)"
-              (matEditLensPreservedFormValueChange)="preservedNameValues.set(element, $event)">
+              [(matEditLensPreservedFormValue)]="nameValues.for(element).value">
             <h2 mat-edit-title>Name</h2>
             <div mat-edit-content>
               <mat-form-field>

src/material-examples/popover-edit-mat-table/popover-edit-mat-table-example.ts

@@ -1,6 +1,7 @@
 import {Component} from '@angular/core';
 import {DataSource} from '@angular/cdk/collections';
 import {DomSanitizer} from '@angular/platform-browser';
+import {FormValueContainer} from '@angular/cdk-experimental/popover-edit';
 import {NgForm} from '@angular/forms';
 import {MatIconRegistry} from '@angular/material';
 import {BehaviorSubject, Observable} from 'rxjs';
@@ -47,8 +48,8 @@ export class PopoverEditMatTableExample {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = new ExampleDataSource();
 
-  readonly preservedNameValues = new WeakMap<PeriodicElement, any>();
-  readonly preservedWeightValues = new WeakMap<PeriodicElement, any>();
+  readonly nameValues = new FormValueContainer<PeriodicElement, any>();
+  readonly weightValues = new FormValueContainer<PeriodicElement, any>();
 
   constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
     iconRegistry.addSvgIcon(