Merge pull request #78 from cloudnc/fix/form-control-names-with-array

fix(lib): `formControlNames` returns array when control is array type

README.md

@@ -471,7 +471,7 @@ Then our view will look like the following:
 
   <div
     class="crew-member"
-    formArrayName="crewMembers"
+    [formArrayName]="formControlNames.crewMembers"
     *ngFor="let crewMember of formGroupControls.crewMembers.controls; let i = index"
   >
     <app-crew-member [formControl]="crewMember"></app-crew-member>

projects/ngx-sub-form/src/lib/ngx-sub-form.component.spec.ts

@@ -625,6 +625,13 @@ describe(`SubArrayComponent`, () => {
     setTimeout(done);
   });
 
+  it(`should have the 'formControlNames' property returning the name of the 'FormArray' instead of an array`, () => {
+    const onChangeSpy = jasmine.createSpy('onChangeSpy');
+    subArrayComponent.registerOnChange(onChangeSpy);
+
+    expect(subArrayComponent.formControlNames).toEqual({ vehicles: 'vehicles' });
+  });
+
   it(`should have the correct values within the 'FormArray'`, () => {
     const onChangeSpy = jasmine.createSpy('onChangeSpy');
 

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

@@ -49,6 +49,7 @@ export abstract class NgxSubFormComponent<ControlInterface, FormInterface = Cont
     const errors: FormErrors<FormInterface> = this.mapControls<ValidationErrors | ValidationErrors[] | null>(
       ctrl => ctrl.errors,
       ctrl => ctrl.invalid,
+      true,
     ) as FormErrors<FormInterface>;
 
     if (!this.formGroup.errors && (!errors || !Object.keys(errors).length)) {
@@ -60,7 +61,7 @@ export abstract class NgxSubFormComponent<ControlInterface, FormInterface = Cont
 
   public get formControlNames(): ControlsNames<FormInterface> {
     // see @note form-group-undefined for as syntax
-    return this.mapControls((_, key) => key) as ControlsNames<FormInterface>;
+    return this.mapControls((_, key) => key, () => true, false) as ControlsNames<FormInterface>;
   }
 
   private controlKeys: (keyof FormInterface)[] = [];
@@ -106,13 +107,15 @@ export abstract class NgxSubFormComponent<ControlInterface, FormInterface = Cont
   private mapControls<MapValue>(
     mapControl: MapControlFunction<FormInterface, MapValue>,
     filterControl: FilterControlFunction<FormInterface>,
+    recursiveIfArray: boolean,
   ): Partial<ControlMap<FormInterface, MapValue | MapValue[]>> | null;
   private mapControls<MapValue>(
     mapControl: MapControlFunction<FormInterface, MapValue>,
   ): ControlMap<FormInterface, MapValue | MapValue[]> | null;
   private mapControls<MapValue>(
     mapControl: MapControlFunction<FormInterface, MapValue>,
     filterControl: FilterControlFunction<FormInterface> = () => true,
+    recursiveIfArray: boolean = true,
   ): Partial<ControlMap<FormInterface, MapValue | MapValue[]>> | null {
     if (!this.formGroup) {
       return null;
@@ -126,7 +129,7 @@ export abstract class NgxSubFormComponent<ControlInterface, FormInterface = Cont
       if (this.formGroup.controls.hasOwnProperty(key)) {
         const control = formControls[key];
 
-        if (control instanceof FormArray) {
+        if (recursiveIfArray && control instanceof FormArray) {
           const values: MapValue[] = [];
 
           for (let i = 0; i < control.length; i++) {

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

@@ -3,7 +3,7 @@
 
   <div
     class="crew-member"
-    formArrayName="crewMembers"
+    [formArrayName]="formControlNames.crewMembers"
     *ngFor="let crewMember of formGroupControls.crewMembers.controls; let i = index"
   >
     <app-crew-member [formControl]="crewMember"></app-crew-member>