-
+
{{message}}
diff --git a/src/Squidex/app/framework/angular/forms/control-errors.component.ts b/src/Squidex/app/framework/angular/forms/control-errors.component.ts
index 673975dfc..1e2215f0b 100644
--- a/src/Squidex/app/framework/angular/forms/control-errors.component.ts
+++ b/src/Squidex/app/framework/angular/forms/control-errors.component.ts
@@ -7,12 +7,20 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Host, Input, OnChanges, OnDestroy, Optional } from '@angular/core';
import { AbstractControl, FormGroupDirective } from '@angular/forms';
-import { merge, Subscription } from 'rxjs';
+import { merge } from 'rxjs';
-import { fadeAnimation, Types } from '@app/framework/internal';
+import {
+ fadeAnimation,
+ StatefulComponent,
+ Types
+} from '@app/framework/internal';
import { formatError } from './error-formatting';
+interface State {
+ errorMessages: string[];
+}
+
@Component({
selector: 'sqx-control-errors',
styleUrls: ['./control-errors.component.scss'],
@@ -22,10 +30,9 @@ import { formatError } from './error-formatting';
],
changeDetection: ChangeDetectionStrategy.OnPush
})
-export class ControlErrorsComponent implements OnChanges, OnDestroy {
+export class ControlErrorsComponent extends StatefulComponent
implements OnChanges, OnDestroy {
private displayFieldName: string;
private control: AbstractControl;
- private controlSubscription: Subscription | null = null;
private originalMarkAsTouched: any;
@Input()
@@ -43,16 +50,20 @@ export class ControlErrorsComponent implements OnChanges, OnDestroy {
@Input()
public submitOnly = false;
- public errorMessages: string[] = [];
-
- constructor(
- @Optional() @Host() private readonly formGroupDirective: FormGroupDirective,
- private readonly changeDetector: ChangeDetectorRef
+ constructor(changeDetector: ChangeDetectorRef,
+ @Optional() @Host() private readonly formGroupDirective: FormGroupDirective
) {
+ super(changeDetector, {
+ errorMessages: []
+ });
}
public ngOnDestroy() {
- this.unsubscribe();
+ super.ngOnDestroy();
+
+ if (this.control && this.originalMarkAsTouched) {
+ this.control['markAsTouched'] = this.originalMarkAsTouched;
+ }
}
public ngOnChanges() {
@@ -75,16 +86,16 @@ export class ControlErrorsComponent implements OnChanges, OnDestroy {
}
if (this.control !== control) {
- this.unsubscribe();
+ this.ngOnDestroy();
this.control = control;
if (control) {
- this.controlSubscription =
+ this.observe(
merge(control.valueChanges, control.statusChanges)
.subscribe(() => {
this.createMessages();
- });
+ }));
this.originalMarkAsTouched = this.control.markAsTouched;
@@ -101,18 +112,8 @@ export class ControlErrorsComponent implements OnChanges, OnDestroy {
this.createMessages();
}
- private unsubscribe() {
- if (this.controlSubscription) {
- this.controlSubscription.unsubscribe();
- }
-
- if (this.control && this.originalMarkAsTouched) {
- this.control['markAsTouched'] = this.originalMarkAsTouched;
- }
- }
-
private createMessages() {
- const errors: string[] = [];
+ const errorMessages: string[] = [];
if (this.control && this.control.invalid && ((this.control.touched && !this.submitOnly) || this.submitted) && this.control.errors) {
for (let key in this.control.errors) {
@@ -120,14 +121,12 @@ export class ControlErrorsComponent implements OnChanges, OnDestroy {
const message = formatError(this.displayFieldName, key, this.control.errors[key], this.control.value, this.errors);
if (message) {
- errors.push(message);
+ errorMessages.push(message);
}
}
}
}
- this.errorMessages = errors;
-
- this.changeDetector.markForCheck();
+ this.next({ errorMessages });
}
}
\ No newline at end of file
diff --git a/src/Squidex/app/framework/angular/forms/json-editor.component.ts b/src/Squidex/app/framework/angular/forms/json-editor.component.ts
index 35f84d0b5..77e3adf1d 100644
--- a/src/Squidex/app/framework/angular/forms/json-editor.component.ts
+++ b/src/Squidex/app/framework/angular/forms/json-editor.component.ts
@@ -5,7 +5,7 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
*/
-import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, forwardRef, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, ViewChild } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
@@ -37,9 +37,10 @@ export class JsonEditorComponent implements ControlValueAccessor, AfterViewInit
@ViewChild('editor')
public editor: ElementRef;
- constructor(
+ constructor(changeDetector: ChangeDetectorRef,
private readonly resourceLoader: ResourceLoaderService
) {
+ changeDetector.detach();
}
public writeValue(obj: any) {
diff --git a/src/Squidex/app/framework/angular/forms/progress-bar.component.ts b/src/Squidex/app/framework/angular/forms/progress-bar.component.ts
index a5f300c0f..4a4d99649 100644
--- a/src/Squidex/app/framework/angular/forms/progress-bar.component.ts
+++ b/src/Squidex/app/framework/angular/forms/progress-bar.component.ts
@@ -5,7 +5,7 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
*/
-import { ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, OnInit, Renderer2, SimpleChanges } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnChanges, OnInit, Renderer2, SimpleChanges } from '@angular/core';
import * as ProgressBar from 'progressbar.js';
@@ -38,10 +38,11 @@ export class ProgressBarComponent implements OnChanges, OnInit {
@Input()
public value = 0;
- constructor(
+ constructor(changeDetector: ChangeDetectorRef,
private readonly element: ElementRef,
private readonly renderer: Renderer2
) {
+ changeDetector.detach();
}
public ngOnInit() {
diff --git a/src/Squidex/app/framework/angular/forms/stars.component.html b/src/Squidex/app/framework/angular/forms/stars.component.html
index 4f325a931..4cf2ca64f 100644
--- a/src/Squidex/app/framework/angular/forms/stars.component.html
+++ b/src/Squidex/app/framework/angular/forms/stars.component.html
@@ -4,8 +4,8 @@