Sortable array forms.

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

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Component, DoCheck, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { AbstractControl, FormGroup } from '@angular/forms';
 import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
@@ -22,10 +22,9 @@ import {
 @Component({
     selector: 'sqx-content-field',
     styleUrls: ['./content-field.component.scss'],
-    templateUrl: './content-field.component.html',
+    templateUrl: './content-field.component.html'
-    changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ContentFieldComponent implements OnChanges {
+export class ContentFieldComponent implements DoCheck, OnChanges {
     @Input()
     public form: EditContentForm;
 
@@ -49,20 +48,26 @@ export class ContentFieldComponent implements OnChanges {
     public isInvalid: Observable<boolean>;
 
     public ngOnChanges(changes: SimpleChanges) {
+        if (changes['fieldForm']) {
+            this.isInvalid = this.fieldForm.statusChanges.pipe(startWith(this.fieldForm.invalid), map(x => this.fieldForm.invalid));
+        }
+    }
+
+    public ngDoCheck() {
+        let control: AbstractControl;
+
         if (this.field.isLocalizable) {
-            this.selectedFormControl = this.fieldForm.controls[this.language.iso2Code];
+            control = this.fieldForm.controls[this.language.iso2Code];
         } else {
-            this.selectedFormControl = this.fieldForm.controls[fieldInvariant];
+            control = this.fieldForm.controls[fieldInvariant];
         }
 
-        if (changes['language']) {
+        if (this.selectedFormControl !== control) {
-            if (Types.isFunction(this.selectedFormControl['_clearChangeFns'])) {
+            if (this.selectedFormControl && Types.isFunction(this.selectedFormControl['_clearChangeFns'])) {
                 this.selectedFormControl['_clearChangeFns']();
             }
-        }
 
-        if (changes['fieldForm']) {
+            this.selectedFormControl = control;
-            this.isInvalid = this.fieldForm.statusChanges.pipe(startWith(this.fieldForm.invalid), map(x => this.fieldForm.invalid));
         }
     }
 }

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

@@ -1,4 +1,4 @@
-<div class="array-container" *ngIf="arrayControl.controls.length > 0">
+<div class="array-container" *ngIf="arrayControl.controls.length > 0" [sqxSortModel]="arrayControl.controls" (sqxSorted)="sort($event)">
     <div class="item" *ngFor="let itemForm of arrayControl.controls; let i = index">
         <sqx-array-item
             [form]="form"

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

@@ -4,16 +4,11 @@
 .array-container {
     background: $color-border;
     padding: 1rem;
+    padding-bottom: 1px;
     position: relative;
     margin-bottom: 1rem;
 }
 
 .item {
-    & {
     margin-bottom: 1rem;
-    }
-
-    &:last-child {
-        margin-bottom: 0;
-    }
 }

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

@@ -6,7 +6,7 @@
  */
 
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { FormArray } from '@angular/forms';
+import { AbstractControl, FormArray } from '@angular/forms';
 
 import {
     AppLanguageDto,
@@ -44,4 +44,10 @@ export class ArrayEditorComponent {
     public addItem() {
         this.form.insertArrayItem(this.field, this.language);
     }
+
+    public sort(controls: AbstractControl[]) {
+        for (let i = 0; i < controls.length; i++) {
+            this.arrayControl.setControl(i, controls[i]);
+        }
+    }
 }

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

@@ -413,24 +413,18 @@ export class EditContentForm extends Form<FormGroup> {
                 const fieldValue = value ? value[field.name] || {} : {};
 
                 const addControls = (key: string, language: AppLanguageDto | null) => {
-                    const partitionValue = fieldValue[key];
+                    const partitionValidators = FieldValidatorsFactory.createValidators(field, language !== null && language.isOptional);
-
+                    const partitionForm = new FormArray([], partitionValidators);
-                    let partitionForm = <FormArray>fieldForm.controls[key];
-
-                    if (!partitionForm) {
-                        partitionForm = new FormArray([]);
 
-                        fieldForm.setControl(key, partitionForm);
+                    const partitionValue = fieldValue[key];
-                    }
-
-                    const length = Types.isArray(partitionValue) ? partitionValue.length : 0;
 
-                    while (partitionForm.controls.length < length) {
+                    if (Types.isArray(partitionValue)) {
+                        for (let i = 0; i < partitionValue.length; i++) {
                             this.addArrayItem(field, language, partitionForm);
                         }
-                    while (partitionForm.controls.length > length) {
-                        partitionForm.removeAt(partitionForm.length - 1);
                     }
+
+                    fieldForm.setControl(key, partitionForm);
                 };
 
                 if (field.isLocalizable) {