fix: when using objects as prefill, the next prefilled value would return the reference of the one before

Author: felixroos

demo/app/medium-editor-demo/medium-editor-demo.component.html

@@ -1,4 +1,4 @@
 <h2>Medium Editor</h2>
 <ec-medium-editor [(ngModel)]="html" [options]="options"></ec-medium-editor>
 <pre><code>{{html}}</code></pre>
-<a class="btn" (click)="html='<h1>Test</h1>'">Change Model from outside</a>
+<a class="btn" (click)="html='<h1>Test</h1>'">Change Model from outside</a>

packages/core/src/form/form.ts

@@ -19,9 +19,9 @@ export class Form<Object> extends Item<Object> {
     this.fields = [];
     if (this.config.fields) {
       Object.keys(this.config.fields)
-      .forEach((property) => {
-        this.fields.push(new Field(property, this.config.fields[property]));
-      });
+        .forEach((property) => {
+          this.fields.push(new Field(property, this.config.fields[property]));
+        });
     } else {
       this.getProperties().forEach((property) => {
         this.fields.push(new Field(property, { type: typeof this.resolve(property) }));
@@ -37,10 +37,16 @@ export class Form<Object> extends Item<Object> {
   /** Returns the original value of the property, if any. */
   getValue(property: string) {
     if (!this.body && this.config.fields && this.config.fields[property]) {
+      // If the prefill is not a primitive, return a clone to stay pristine
+      if (Array.isArray(this.config.fields[property].prefill)) {
+        return this.config.fields[property].prefill.slice(0);
+      } else if (typeof this.config.fields[property].prefill === 'object') {
+        return Object.assign({}, this.config.fields[property].prefill);
+      }
       // if no body is present, the prefills are used
       return this.config.fields[property].prefill;
     } else {
       return this.resolve(property);
     }
   }
-}
+}

packages/data/src/crud/crud.service.ts

@@ -35,7 +35,7 @@ export class CrudService {
   /** Gives true if the given change fits all property values of the filter. */
   matches(change: Update, filter: Update): boolean {
     return Object.keys(filter)
-    .reduce((match, key) => match && change[key] === filter[key], true);
+      .reduce((match, key) => match && change[key] === filter[key], true);
   }
 
   /** Yields an observable that emits for all updates that match the given filter */
@@ -52,11 +52,11 @@ export class CrudService {
       return this.update(model, entry, value);
     }
     return this.create(model, value)
-    .then((_entry) => {
-      return _entry;
-    }).catch((err) => {
-      return Promise.reject(err);
-    });
+      .then((_entry) => {
+        return _entry;
+      }).catch((err) => {
+        return Promise.reject(err);
+      });
   }
 
   /** Updates the given entry with the new value. Fires the "update" change. */
@@ -68,10 +68,10 @@ export class CrudService {
       this.changes.next({ model, entry: _entry, type: 'put' });
       return _entry;
     })
-    .catch((err) => {
-      Object.assign(entry, this.clean(oldValues)); // fall back to old values
-      return Promise.reject(err);
-    });
+      .catch((err) => {
+        Object.assign(entry, this.clean(oldValues)); // fall back to old values
+        return Promise.reject(err);
+      });
   }
 
   /** Returns true if the given field key is an immutable system property */
@@ -83,11 +83,13 @@ export class CrudService {
   /** Removes all null or undefined values from the given object */
   clean(value: Object): Object {
     for (const key in value) {
-      if (value[key] === '') { // clear empty strings
-        value[key] = null;
-      }
-      if (this.isImmutableProperty(key)) { // filter system properties
-        delete value[key];
+      if (value.hasOwnProperty(key)) {
+        if (value[key] === '') { // clear empty strings
+          value[key] = null;
+        }
+        if (this.isImmutableProperty(key)) { // filter system properties
+          delete value[key];
+        }
       }
     }
     return value;
@@ -96,14 +98,14 @@ export class CrudService {
   /** Creates a new entry with the given value for the given model. Fires the "create" change. */
   create(model: string, value: Object): Promise<EntryResource> {
     return this.sdk.api.createEntry(model, this.clean(value))
-    .then((entry) => {
-      // console.log('created entry', entry);
-      // TODO make sure leveled entries are returned leveled
-      this.changes.next({ model, entry, type: 'post' });
-      return entry;
-    }).catch((err) => {
-      return Promise.reject(err);
-    });
+      .then((entry) => {
+        // console.log('created entry', entry);
+        // TODO make sure leveled entries are returned leveled
+        this.changes.next({ model, entry, type: 'post' });
+        return entry;
+      }).catch((err) => {
+        return Promise.reject(err);
+      });
   }
 
   /** deletes the given entry and emits the "delete" change. */