Fix form group.

Squidex · Sep 13, 2023 · 2915bbc · 2915bbc
1 parent 9e9093d
commit 2915bbc
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 11 deletions.
diff --git a/frontend/src/app/framework/angular/forms/extended-form-array.spec.ts b/frontend/src/app/framework/angular/forms/extended-form-array.spec.ts
@@ -41,6 +41,18 @@ describe('UndefinableFormArray', () => {
         valueActual: [1],
     }];
 
+    it('should initialize with undefined', () => {
+        const control = new UndefinableFormArray();
+
+        expect(control.value).toBeUndefined();
+    });
+
+    it('should initialize with empty array', () => {
+        const control = new UndefinableFormArray([]);
+
+        expect(control.value).toEqual([]);
+    });
+
     it('should provide value even if controls are disabled', () => {
         const control = new UndefinableFormArray([
             new UntypedFormControl('1'),

diff --git a/frontend/src/app/framework/angular/forms/extended-form-array.ts b/frontend/src/app/framework/angular/forms/extended-form-array.ts
@@ -23,10 +23,10 @@ export class ExtendedFormArray extends UntypedFormArray {
 }
 
 export class UndefinableFormArray extends ExtendedFormArray {
-    private isUndefined = true;
+    private isUndefined = false;
 
-    constructor(controls: AbstractControl[], validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null) {
-        super(controls, validatorOrOpts, asyncValidator);
+    constructor(controls?: AbstractControl[], validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null) {
+        super(controls || [], validatorOrOpts, asyncValidator);
 
         const reduce = (this as any)['_reduceValue'];
 
@@ -37,6 +37,12 @@ export class UndefinableFormArray extends ExtendedFormArray {
                 return reduce.apply(this);
             }
         };
+
+        if (Types.isUndefined(controls)) {
+            this.isUndefined = true;
+
+            super.reset([], { emitEvent: false });
+        }
     }
 
     public getRawValue() {

diff --git a/frontend/src/app/framework/angular/forms/extended-form-group.spec.ts b/frontend/src/app/framework/angular/forms/extended-form-group.spec.ts
@@ -8,7 +8,7 @@
 import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { ExtendedFormGroup, UndefinableFormGroup } from './extended-form-group';
 
-describe('UndefinableFormGroup', () => {
+describe('ExtendedFormGroup', () => {
     it('should provide value even if controls are disabled', () => {
         const control = new ExtendedFormGroup({
             test1: new UntypedFormControl('1'),
@@ -23,7 +23,7 @@ describe('UndefinableFormGroup', () => {
     });
 });
 
-describe('ExtendedFormGroup', () => {
+describe('UndefinableFormGroup', () => {
     const tests = [{
         name: 'undefined (on)',
         undefinable: true,
@@ -41,8 +41,20 @@ describe('ExtendedFormGroup', () => {
         valueActual: { field: 1 },
     }];
 
+    it('should initialize with undefined', () => {
+        const control = new UndefinableFormGroup();
+
+        expect(control.value).toBeUndefined();
+    });
+
+    it('should initialize with empty array', () => {
+        const control = new UndefinableFormGroup({});
+
+        expect(control.value).toEqual({});
+    });
+
     it('should provide value even if controls are disabled', () => {
-        const control = new ExtendedFormGroup({
+        const control = new UndefinableFormGroup({
             test1: new UntypedFormControl('1'),
             test2: new UntypedFormControl('2'),
         });

diff --git a/frontend/src/app/framework/angular/forms/extended-form-group.ts b/frontend/src/app/framework/angular/forms/extended-form-group.ts
@@ -29,10 +29,10 @@ export class ExtendedFormGroup extends UntypedFormGroup {
 }
 
 export class UndefinableFormGroup extends ExtendedFormGroup {
-    private isUndefined = true;
+    private isUndefined = false;
 
-    constructor(controls: { [key: string]: AbstractControl }, validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null) {
-        super(controls, validatorOrOpts, asyncValidator);
+    constructor(controls?: { [key: string]: AbstractControl }, validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null) {
+        super(controls || {}, validatorOrOpts, asyncValidator);
 
         const reduce = (this as any)['_reduceValue'];
 
@@ -43,6 +43,12 @@ export class UndefinableFormGroup extends ExtendedFormGroup {
                 return reduce.apply(this);
             }
         };
+
+        if (Types.isUndefined(controls)) {
+            this.isUndefined = true;
+
+            super.reset({}, { emitEvent: false });
+        }
     }
 
     public getRawValue() {

diff --git a/frontend/src/app/framework/angular/forms/templated-form-array.ts b/frontend/src/app/framework/angular/forms/templated-form-array.ts
@@ -21,7 +21,7 @@ export class TemplatedFormArray extends UndefinableFormArray {
     constructor(public readonly template: FormArrayTemplate,
         validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null,
     ) {
-        super([], validatorOrOpts, asyncValidator);
+        super(undefined, validatorOrOpts, asyncValidator);
     }
 
     public setValue(value?: any[], options?: { onlySelf?: boolean; emitEvent?: boolean }) {

diff --git a/frontend/src/app/framework/angular/forms/templated-form-group.ts b/frontend/src/app/framework/angular/forms/templated-form-group.ts
@@ -19,7 +19,7 @@ export class TemplatedFormGroup extends UndefinableFormGroup {
     constructor(public readonly template: FormGroupTemplate,
         validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null,
     ) {
-        super({}, validatorOrOpts, asyncValidator);
+        super(undefined, validatorOrOpts, asyncValidator);
     }
 
     public setValue(value?: {}, options?: { onlySelf?: boolean; emitEvent?: boolean }) {