Fixes for nested array.

NuGet.Config

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+  <packageSources>
+    <add key="nuget.org" value="https://api.nuget.org/v3/index.json" protocolVersion="3" />
+  </packageSources>
+</configuration>

src/Squidex/app/features/content/declarations.ts

@@ -13,6 +13,7 @@ export * from './pages/schemas/schemas-page.component';
 
 export * from './shared/array-editor.component';
 export * from './shared/assets-editor.component';
+export * from './shared/array-item.component';
 export * from './shared/content-item.component';
 export * from './shared/content-status.component';
 export * from './shared/contents-selector.component';

src/Squidex/app/features/content/module.ts

@@ -23,6 +23,7 @@ import {
 
 import {
     ArrayEditorComponent,
+    ArrayItemComponent,
     AssetsEditorComponent,
     ContentFieldComponent,
     ContentHistoryComponent,
@@ -92,6 +93,7 @@ const routes: Routes = [
     ],
     declarations: [
         ArrayEditorComponent,
+        ArrayItemComponent,
         AssetsEditorComponent,
         ContentFieldComponent,
         ContentHistoryComponent,

src/Squidex/app/features/content/pages/content/content-field.component.ts

@@ -8,6 +8,7 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { AbstractControl, FormGroup } from '@angular/forms';
 import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
 
 import {
     AppLanguageDto,
@@ -17,7 +18,6 @@ import {
     RootFieldDto,
     Types
 } from '@app/shared';
-import { map, startWith } from 'rxjs/operators';
 
 @Component({
     selector: 'sqx-content-field',

src/Squidex/app/features/content/shared/array-editor.component.html

@@ -1,20 +1,13 @@
-<div class="array-container" *ngIf="arrayControl.controls.length > 0">
+<div class="container" *ngIf="arrayControl.controls.length > 0">
-    <div class="array-item" *ngFor="let nestedForm of arrayControl.controls; let i = index" [class.invalid]="nestedForm.invalid">
+    <div class="item" *ngFor="let itemForm of arrayControl.controls; let i = index">
-        <button type="button" class="btn btn-link btn-danger array-item-remove" (click)="removeItem(i); $event.preventDefault()">
+        <sqx-array-item
-            <i class="icon-bin2"></i>
-        </button>
-        
-        <div class="form-group" *ngFor="let nestedField of field.nested">
-            <ng-container *ngIf="nestedForm.get(nestedField.name); let nestedFieldForm">
-                <sqx-field-editor
             [form]="form"
-                    [field]="nestedField"
+            [field]="field"
+            [itemForm]="itemForm"
             [language]="language"
             [languages]="languages"
-                    [control]="nestedFieldForm">
+            (removing)="removeItem(i)">
-                </sqx-field-editor>
+        </sqx-array-item>
-            </ng-container>
-        </div>
     </div>
 </div>
 

src/Squidex/app/features/content/shared/array-editor.component.scss

@@ -1,34 +1,19 @@
 @import '_vars';
 @import '_mixins';
 
-.array {
+.container {
-    &-container {
     background: $color-border;
     padding: 1rem;
     position: relative;
     margin-bottom: 1rem;
-    }
+}
 
-    &-item {
+.item {
     & {
-            background: $panel-light-background;
-            border: 1px solid darken($color-border, 5%);
-            border-left-width: 4px;
-            padding: 1rem;
-            position: relative;
         margin-bottom: 1rem;
     }
 
     &:last-child {
         margin-bottom: 0;
     }
-    }
-
-    &-item-remove {
-        @include absolute(.5rem, .5rem, auto, auto);
-    }
-}
-
-.invalid {
-    border-left-color: $color-theme-error;
 }

src/Squidex/app/features/content/shared/array-editor.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { FormArray } from '@angular/forms';
 
 import {
@@ -18,7 +18,8 @@ import {
 @Component({
     selector: 'sqx-array-editor',
     styleUrls: ['./array-editor.component.scss'],
-    templateUrl: './array-editor.component.html'
+    templateUrl: './array-editor.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ArrayEditorComponent {
     @Input()

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

@@ -0,0 +1,15 @@
+<div class="item" [class.invalid]="isInvalid | async">
+    <button type="button" class="btn btn-link btn-danger item-remove" (click)="removing.emit(); $event.preventDefault()">
+        <i class="icon-bin2"></i>
+    </button>
+    
+    <div class="form-group" *ngFor="let fieldControl of fieldControls">
+        <sqx-field-editor
+            [form]="form"
+            [field]="fieldControl.field"
+            [language]="language"
+            [languages]="languages"
+            [control]="fieldControl.control">
+        </sqx-field-editor>
+    </div>
+</div>

src/Squidex/app/features/content/shared/array-item.component.scss

@@ -0,0 +1,21 @@
+@import '_vars';
+@import '_mixins';
+
+
+.item {
+    & {
+        background: $panel-light-background;
+        border: 1px solid darken($color-border, 5%);
+        border-left-width: 4px;
+        padding: 1rem;
+        position: relative;
+    }
+
+    &-remove {
+        @include absolute(.5rem, .5rem, auto, auto);
+    }
+}
+
+.invalid {
+    border-left-color: $color-theme-error;
+}

src/Squidex/app/features/content/shared/array-item.component.ts

@@ -0,0 +1,59 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { AbstractControl, FormGroup } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+
+import {
+    AppLanguageDto,
+    EditContentForm,
+    FieldDto,
+    ImmutableArray,
+    RootFieldDto
+} from '@app/shared';
+
+@Component({
+    selector: 'sqx-array-item',
+    styleUrls: ['./array-item.component.scss'],
+    templateUrl: './array-item.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ArrayItemComponent implements OnChanges {
+    @Output()
+    public removing = new EventEmitter();
+
+    @Input()
+    public form: EditContentForm;
+
+    @Input()
+    public field: RootFieldDto;
+
+    @Input()
+    public itemForm: FormGroup;
+
+    @Input()
+    public language: AppLanguageDto;
+
+    @Input()
+    public languages: ImmutableArray<AppLanguageDto>;
+
+    public isInvalid: Observable<boolean>;
+
+    public fieldControls: { field: FieldDto, control: AbstractControl }[];
+
+    public ngOnChanges(changes: SimpleChanges) {
+        if (changes['itemForm']) {
+            this.isInvalid = this.itemForm.statusChanges.pipe(startWith(this.itemForm.invalid), map(x => this.itemForm.invalid));
+        }
+
+        if (changes['itemForm'] || changes['field']) {
+            this.fieldControls = this.field.nested.map(field => ({ field, control: this.itemForm.get(field.name)! })).filter(x => !!x.control);
+        }
+    }
+}