Fix default values for components.

frontend/src/app/features/content/shared/forms/array-item.component.html

@@ -43,7 +43,7 @@
     </div>
     
     <div class="card-body" *ngIf="snapshot.isExpandedOnce" [class.hidden]="!snapshot.isExpanded">
-        <div class="form-group" *ngFor="let section of formModel.fieldSectionsChanges | async">
+        <div class="form-group" *ngFor="let section of formModel.sectionsChanges | async">
             <sqx-component-section
                 [canUnset]="canUnset"
                 [form]="form"

frontend/src/app/features/content/shared/forms/component.component.html

@@ -4,7 +4,7 @@
             {{schema.displayName}}
         </sqx-form-hint>
 
-        <div class="form-group" *ngFor="let section of formModel.fieldSectionsChanges | async">
+        <div class="form-group" *ngFor="let section of formModel.sectionsChanges | async">
             <sqx-component-section
                 [canUnset]="canUnset"
                 [form]="form"

frontend/src/app/shared/state/contents.forms.spec.ts

@@ -11,7 +11,7 @@ import { AbstractControl, FormArray } from '@angular/forms';
 import { MathHelper } from '@app/framework';
 import { AppLanguageDto, createProperties, EditContentForm, getContentValue, HtmlValue, LanguageDto, RootFieldDto } from '@app/shared/internal';
 import { FieldRule, SchemaDto } from './../services/schemas.service';
-import { FieldArrayForm } from './contents.forms';
+import { ComponentForm, FieldArrayForm } from './contents.forms';
 import { PartitionConfig } from './contents.forms-helpers';
 import { TestValues } from './_test-helpers';
 
@@ -504,6 +504,61 @@ describe('ContentForm', () => {
             expect(array.get(1)!.get('field1')!.hidden).toBeFalsy();
         });
 
+        it('should add component with default values', () => {
+            const componentId = MathHelper.guid();
+            const component = createSchema({
+                id: 1,
+                fields: [
+                    createField({
+                        id: 11,
+                        properties: createProperties('String', {
+                            defaultValue: 'Initial',
+                        }),
+                        partitioning: 'invariant',
+                    }),
+                    createField({
+                        id: 12,
+                        properties: createProperties('Number', {
+                            defaultValue: 12,
+                        }),
+                        partitioning: 'invariant',
+                    }),
+                ],
+            });
+
+            const contentForm = createForm([
+                createField({
+                    id: 4,
+                    properties: createProperties('Component'),
+                    partitioning: 'invariant',
+                }),
+            ], [], {
+                [componentId]: component,
+            });
+
+            contentForm.load({});
+
+            // Should be undefined by default.
+            expect(contentForm.value).toEqual({
+                field4: {
+                    iv: undefined,
+                },
+            });
+
+            (contentForm.get('field4')?.get('iv') as ComponentForm).selectSchema(componentId);
+
+            // Should add field from component.
+            expect(contentForm.value).toEqual({
+                field4: {
+                    iv: {
+                        schemaId: componentId,
+                        field11: 'Initial',
+                        field12: 12,
+                    },
+                },
+            });
+        });
+
         it('should replace component with new fields', () => {
             const component1Id = MathHelper.guid();
             const component1 = createSchema({

frontend/src/app/shared/state/contents.forms.ts

@@ -326,7 +326,7 @@ export class FieldArrayForm extends AbstractContentForm<FieldDto, TemplatedFormA
         return this.item$.value;
     }
 
-    public set items(value: ReadonlyArray<ObjectFormBase>) {
+    public set internalItems(value: ReadonlyArray<ObjectFormBase>) {
         this.item$.next(value);
     }
 
@@ -367,7 +367,7 @@ export class FieldArrayForm extends AbstractContentForm<FieldDto, TemplatedFormA
         children.splice(children.indexOf(item), 1);
         children.splice(index, 0, item);
 
-        this.items = children;
+        this.internalItems = children;
 
         this.sort(children);
     }
@@ -400,17 +400,17 @@ class ArrayTemplate implements FormArrayTemplate {
             this.createComponent() :
             this.createItem();
 
-        this.model.items = [...this.model.items, child];
+        this.model.internalItems = [...this.model.items, child];
 
         return child.form;
     }
 
     public removeControl(index: number) {
-        this.model.items = this.model.items.filter((_, i) => i !== index);
+        this.model.internalItems = this.model.items.filter((_, i) => i !== index);
     }
 
     public clearControls() {
-        this.model.items = [];
+        this.model.internalItems = [];
     }
 
     private createItem() {
@@ -439,19 +439,19 @@ export type FieldItemForm = ComponentForm | FieldValueForm | FieldArrayForm;
 type FieldMap = { [name: string]: FieldItemForm };
 
 export class ObjectFormBase<TField extends FieldDto = FieldDto> extends AbstractContentForm<TField, TemplatedFormGroup> {
-    private readonly fieldSections$ = new BehaviorSubject<ReadonlyArray<FieldSection<FieldDto, FieldItemForm>>>([]);
+    private readonly sections$ = new BehaviorSubject<ReadonlyArray<FieldSection<FieldDto, FieldItemForm>>>([]);
     private readonly fields$ = new BehaviorSubject<FieldMap>({});
 
-    public get fieldSectionsChanges(): Observable<ReadonlyArray<FieldSection<FieldDto, FieldItemForm>>> {
+    public get sectionsChanges(): Observable<ReadonlyArray<FieldSection<FieldDto, FieldItemForm>>> {
-        return this.fieldSections$;
+        return this.sections$;
     }
 
-    public get fieldSections() {
+    public get sections() {
-        return this.fieldSections$.value;
+        return this.sections$.value;
     }
 
-    public set fieldSections(value: ReadonlyArray<FieldSection<FieldDto, FieldItemForm>>) {
+    public set internalFieldSections(value: ReadonlyArray<FieldSection<FieldDto, FieldItemForm>>) {
-        this.fieldSections$.next(value);
+        this.sections$.next(value);
     }
 
     public get fieldsChanges(): Observable<FieldMap> {
@@ -462,7 +462,7 @@ export class ObjectFormBase<TField extends FieldDto = FieldDto> extends Abstract
         return this.fields$.value;
     }
 
-    public set fields(value: FieldMap) {
+    public set internalFieldByName(value: FieldMap) {
         this.fields$.next(value);
     }
 
@@ -483,7 +483,7 @@ export class ObjectFormBase<TField extends FieldDto = FieldDto> extends Abstract
             field.updateState(context, this.form.value, state);
         }
 
-        for (const section of this.fieldSections) {
+        for (const section of this.sections) {
             section.updateHidden();
         }
     }
@@ -529,8 +529,8 @@ abstract class ObjectTemplate<T extends ObjectFormBase = ObjectFormBase> impleme
         }
     }
 
-    protected setControlsCore(schema: ReadonlyArray<FieldDto>, value: any, model: T, form: FormGroup) {
+    protected setControlsCore(schema: ReadonlyArray<FieldDto>, _: any, model: T, form: FormGroup) {
-        const fieldMap: FieldMap = {};
+        const fieldByName: FieldMap = {};
         const fieldSections: FieldSection<FieldDto, FieldItemForm>[] = [];
 
         for (const { separator, fields } of groupFields(schema)) {
@@ -549,14 +549,14 @@ abstract class ObjectTemplate<T extends ObjectFormBase = ObjectFormBase> impleme
 
                 forms.push(childForm);
 
-                fieldMap[field.name] = childForm;
+                fieldByName[field.name] = childForm;
             }
 
             fieldSections.push(new FieldSection<FieldDto, FieldItemForm>(separator, forms));
         }
 
-        model.fields = fieldMap;
+        model.internalFieldByName = fieldByName;
-        model.fieldSections = fieldSections;
+        model.internalFieldSections = fieldSections;
     }
 
     protected clearControlsCore(model: T) {
@@ -564,8 +564,8 @@ abstract class ObjectTemplate<T extends ObjectFormBase = ObjectFormBase> impleme
             model.form.removeControl(name);
         }
 
-        model.fields = {};
+        model.internalFieldByName = {};
-        model.fieldSections = [];
+        model.internalFieldSections = [];
     }
 }
 
@@ -595,7 +595,7 @@ export class ComponentForm extends ObjectFormBase {
         return this.schema$.value;
     }
 
-    public set schema(value: SchemaDto | undefined) {
+    public set internalSchema(value: SchemaDto | undefined) {
         this.schema$.next(value);
     }
 
@@ -610,11 +610,10 @@ export class ComponentForm extends ObjectFormBase {
             partition);
 
         this.form.reset(undefined);
-        this.form.build();
     }
 
     public selectSchema(schemaId: string) {
-        this.form.reset({ schemaId });
+        this.form.patchValue({ schemaId });
     }
 }
 
@@ -626,13 +625,13 @@ class ComponentTemplate extends ObjectTemplate<ComponentForm> {
     protected setControlsCore(schema: ReadonlyArray<FieldDto>, value: any, model: ComponentForm, form: FormGroup) {
         form.setControl('schemaId', new FormControl());
 
-        this.model.schema = model.globals.schemas[value?.schemaId];
+        this.model.internalSchema = model.globals.schemas[value?.schemaId];
 
         super.setControlsCore(schema, value, model, form);
     }
 
     protected clearControlsCore(model: ComponentForm) {
-        this.model.schema = undefined;
+        this.model.internalSchema = undefined;
 
         super.clearControlsCore(model);
     }