[WIP] fix: form array validation (for rewrite)

projects/ngx-sub-form/src/lib/helpers.ts

@@ -1,26 +1,20 @@
-import {
-  AbstractControlOptions,
-  ControlValueAccessor,
-  FormArray,
-  FormControl,
-  FormGroup,
-  ValidationErrors,
-} from '@angular/forms';
+import { AbstractControlOptions, ControlValueAccessor, FormArray, FormGroup, ValidationErrors } from '@angular/forms';
 import { ReplaySubject } from 'rxjs';
 import { Nilable } from 'tsdef';
 import {
+  ControlValueAccessorComponentInstance,
+  FormBindings,
+  NgxSubFormArrayOptions,
+  NgxSubFormOptions,
+} from './ngx-sub-form.types';
+import {
+  AAAAAA,
   ArrayPropertyKey,
   ControlsNames,
   NewFormErrors,
   OneOfControlsTypes,
   TypedFormGroup,
 } from './shared/ngx-sub-form-utils';
-import {
-  ControlValueAccessorComponentInstance,
-  FormBindings,
-  NgxSubFormArrayOptions,
-  NgxSubFormOptions,
-} from './ngx-sub-form.types';
 
 export const deepCopy = <T>(value: T): T => JSON.parse(JSON.stringify(value));
 
@@ -88,7 +82,7 @@ export const getFormGroupErrors = <ControlInterface, FormInterface>(
       // with the index and the error
       // this way, we avoid holding a lot of potential `null`
       // values in the array for the valid form controls
-      const errorsInArray: Record<number, ValidationErrors> = {};
+      const errorsInArray: AAAAAA = {};
 
       for (let i = 0; i < control.length; i++) {
         const controlErrors = control.at(i).errors;
@@ -97,8 +91,18 @@ export const getFormGroupErrors = <ControlInterface, FormInterface>(
         }
       }
 
+      // following fixes
+      // https://github.com/cloudnc/ngx-sub-form/issues/161
+      // if we've got a form array we can't only take into account
+      // the errors in the form array coming from its items
+      // we also need to take into account the errors attached to
+      // the form array itself if it has any validator
+      if (control.errors) {
+        errorsInArray['formArray'] = control.errors;
+      }
+
       if (Object.values(errorsInArray).length > 0) {
-        const accHoldingArrays = acc as Record<keyof ControlInterface, Record<number, ValidationErrors>>;
+        const accHoldingArrays = acc as Record<keyof ControlInterface, AAAAAA>;
         accHoldingArrays[key as keyof ControlInterface] = errorsInArray;
       }
     } else if (control.errors) {

projects/ngx-sub-form/src/lib/shared/ngx-sub-form-utils.ts

@@ -10,7 +10,7 @@ import {
   ValidationErrors,
 } from '@angular/forms';
 import { getObservableLifecycle } from 'ngx-observable-lifecycle';
-import { Observable, Subject, timer } from 'rxjs';
+import { Observable, timer } from 'rxjs';
 import { debounce, takeUntil } from 'rxjs/operators';
 import { NgxSubFormComponent } from '../deprecated/ngx-sub-form.component';
 
@@ -47,9 +47,11 @@ export type FormErrors<FormInterface> = null | Partial<
   }
 >;
 
+export type AAAAAA = { [key in number | 'formArray']?: ValidationErrors };
+
 // @todo rename to `FormErrorsType` once the deprecated one is removed
 export type NewFormErrorsType<T> = {
-  [K in keyof T]-?: T[K] extends any[] ? Record<number, ValidationErrors> : ValidationErrors;
+  [K in keyof T]-?: T[K] extends any[] ? AAAAAA : ValidationErrors;
 };
 
 // @todo rename to `FormErrors` once the deprecated one is removed

src/app/app.spec.e2e.ts

@@ -8,10 +8,10 @@ import { Spaceship, Speeder, VehicleType } from './interfaces/vehicle.interface'
 import { hardCodedListings } from './services/listings.data';
 
 context(`EJawa demo`, () => {
-  const testContexts = [
-    { id: 'old', testName: 'Old implementation', url: '' },
+  const testContexts: { id: any; testName: any; url: any }[] = [
+    // { id: 'old', testName: 'Old implementation', url: '' },
     { id: 'new', testName: 'New implementation', url: '/rewrite' },
-  ] as const;
+  ];
 
   testContexts.forEach(({ id, testName, url }) => {
     context(testName, () => {
@@ -124,7 +124,7 @@ context(`EJawa demo`, () => {
         });
       });
 
-      it(`should display the (nested) errors from the form`, () => {
+      it.only(`should display the (nested) errors from the form`, () => {
         DOM.createNewButton.click();
 
         DOM.form.errors.should($el => {
@@ -176,6 +176,14 @@ context(`EJawa demo`, () => {
                 },
                 crewMembers: {
                   required: true,
+                  crewMembers: {
+                    formArray: {
+                      minLengthArray: {
+                        currentLength: 0,
+                        minimumLength: 3,
+                      },
+                    },
+                  },
                 },
                 wingCount: {
                   required: true,
@@ -250,6 +258,12 @@ context(`EJawa demo`, () => {
                           required: true,
                         },
                       },
+                      formArray: {
+                        minLengthArray: {
+                          currentLength: 1,
+                          minimumLength: 3,
+                        },
+                      },
                     },
                   },
                   wingCount: {

src/app/main-rewrite/listing/listing-form/vehicle-listing/crew-members/crew-members.component.html

@@ -24,3 +24,6 @@
     Add a crew member
   </button>
 </fieldset>
+
+<!-- todo: remove as this is just for debugging -->
+<pre>{{ form.formGroupErrors | json }}</pre>

src/app/main-rewrite/listing/listing-form/vehicle-listing/crew-members/crew-members.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { FormArray, FormControl, Validators } from '@angular/forms';
+import { AbstractControl, FormArray, FormControl, Validators } from '@angular/forms';
 import { createForm, FormType, subformComponentProviders } from 'ngx-sub-form';
 import { CrewMember } from '../../../../../interfaces/crew-member.interface';
 
@@ -18,7 +18,12 @@ export class CrewMembersComponent {
   public form = createForm<CrewMember[], CrewMembersForm>(this, {
     formType: FormType.SUB,
     formControls: {
-      crewMembers: new FormArray([]),
+      crewMembers: new FormArray(
+        [],
+        // the following validator is here to make sure we have a proper fix to
+        // https://github.com/cloudnc/ngx-sub-form/issues/161
+        this.minLengthArray(3),
+      ),
     },
     toFormGroup: (obj: CrewMember[]): CrewMembersForm => {
       return {
@@ -50,4 +55,19 @@ export class CrewMembersComponent {
       }),
     );
   }
+
+  private minLengthArray(minimumLength: number) {
+    return (c: AbstractControl): { [key: string]: any } | null => {
+      if (c.value.length >= minimumLength) {
+        return null;
+      }
+
+      return {
+        minLengthArray: {
+          currentLength: c.value.length,
+          minimumLength,
+        },
+      };
+    };
+  }
 }