diff --git a/src/Squidex/app/features/content/pages/content/content-field.component.ts b/src/Squidex/app/features/content/pages/content/content-field.component.ts index 203ac26d1..ec7a9d5ad 100644 --- a/src/Squidex/app/features/content/pages/content/content-field.component.ts +++ b/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', - changeDetection: ChangeDetectionStrategy.OnPush + templateUrl: './content-field.component.html' }) -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; 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 (Types.isFunction(this.selectedFormControl['_clearChangeFns'])) { + if (this.selectedFormControl !== control) { + if (this.selectedFormControl && Types.isFunction(this.selectedFormControl['_clearChangeFns'])) { this.selectedFormControl['_clearChangeFns'](); } - } - if (changes['fieldForm']) { - this.isInvalid = this.fieldForm.statusChanges.pipe(startWith(this.fieldForm.invalid), map(x => this.fieldForm.invalid)); + this.selectedFormControl = control; } } } diff --git a/src/Squidex/app/features/content/shared/array-editor.component.html b/src/Squidex/app/features/content/shared/array-editor.component.html index f1df6fcf0..f84369b5c 100644 --- a/src/Squidex/app/features/content/shared/array-editor.component.html +++ b/src/Squidex/app/features/content/shared/array-editor.component.html @@ -1,4 +1,4 @@ -
+
{ const fieldValue = value ? value[field.name] || {} : {}; const addControls = (key: string, language: AppLanguageDto | null) => { - const partitionValue = fieldValue[key]; - - let partitionForm = fieldForm.controls[key]; + const partitionValidators = FieldValidatorsFactory.createValidators(field, language !== null && language.isOptional); + const partitionForm = new FormArray([], partitionValidators); - if (!partitionForm) { - partitionForm = new FormArray([]); + const partitionValue = fieldValue[key]; - fieldForm.setControl(key, partitionForm); + if (Types.isArray(partitionValue)) { + for (let i = 0; i < partitionValue.length; i++) { + this.addArrayItem(field, language, partitionForm); + } } - const length = Types.isArray(partitionValue) ? partitionValue.length : 0; - - while (partitionForm.controls.length < length) { - this.addArrayItem(field, language, partitionForm); - } - while (partitionForm.controls.length > length) { - partitionForm.removeAt(partitionForm.length - 1); - } + fieldForm.setControl(key, partitionForm); }; if (field.isLocalizable) {