94301: Trickle down errors to concat field inputs

When a concat group is marked as invalid ~ server error, its fields should also be marked as invalid

Author: ybnd

src/app/shared/form/form.service.spec.ts

@@ -108,8 +108,15 @@ describe('FormService test suite', () => {
       const title: AbstractControl = new FormControl(undefined, Validators.required);
       const date: AbstractControl = new FormControl(undefined);
       const description: AbstractControl = new FormControl(undefined);
-      formGroup = new FormGroup({ author, title, date, description });
-      controls = { author, title, date, description };
+
+      const addressLocation: FormGroup = new FormGroup({
+        zipCode: new FormControl(undefined),
+        state: new FormControl(undefined),
+        city: new FormControl(undefined),
+      });
+
+      formGroup = new FormGroup({ author, title, date, description, addressLocation });
+      controls = { author, title, date, description , addressLocation };
       service = new FormService(builderService, store);
     })
   )
@@ -179,6 +186,30 @@ describe('FormService test suite', () => {
     expect(formGroup.controls.description.touched).toBe(true);
   });
 
+  it('should add errors to fields of group', () => {
+    let control = controls.addressLocation;
+    let model = formModel.find((mdl: DynamicFormControlModel) => mdl.id === 'addressLocation');
+    let errorKeys: string[];
+
+    service.addErrorToField(control, model, 'Test error message');
+
+    // the group itself should get an error
+    errorKeys = Object.keys(control.errors);
+    expect(errorKeys.length).toBe(1);
+    expect(control.hasError(errorKeys[0])).toBe(true);
+
+    expect(control.touched).toBe(true);
+
+    // the group's inputs should get an error
+    Object.values(control.controls).forEach((subControl: AbstractControl) => {
+      errorKeys = Object.keys(subControl.errors);
+      expect(errorKeys.length).toBe(1);
+      expect(subControl.hasError(errorKeys[0])).toBe(true);
+      expect(subControl.touched).toBe(true);
+    });
+
+  });
+
   it('should remove error from field', () => {
     let control = controls.description;
     let model = formModel.find((mdl: DynamicFormControlModel) => mdl.id === 'description');
@@ -209,6 +240,30 @@ describe('FormService test suite', () => {
     expect(formGroup.controls.description.touched).toBe(false);
   });
 
+  it('should remove errors from fields of group', () => {
+    let control = controls.addressLocation;
+    let model = formModel.find((mdl: DynamicFormControlModel) => mdl.id === 'addressLocation');
+    let errorKeys: string[];
+
+    service.addErrorToField(control, model, 'Test error message');
+    errorKeys = Object.keys(control.errors);
+
+    service.removeErrorFromField(control, model, errorKeys[0]);
+
+    // the group itself should no longer have an error
+    expect(errorKeys.length).toBe(1);
+    expect(control.hasError(errorKeys[0])).toBe(false);
+    expect(control.touched).toBe(false);
+
+    // the group's inputs should no longer have an error
+    Object.values(control.controls).forEach((subControl: AbstractControl) => {
+      errorKeys = Object.keys(subControl.errors);
+      expect(errorKeys.length).toBe(1);
+      expect(subControl.hasError(errorKeys[0])).toBe(false);
+      expect(subControl.touched).toBe(false);
+    });
+  });
+
   it('should reset form group', () => {
     const control = controls.author;
 

src/app/shared/form/form.service.ts

@@ -7,7 +7,7 @@ import { select, Store } from '@ngrx/store';
 import { AppState } from '../../app.reducer';
 import { formObjectFromIdSelector } from './selectors';
 import { FormBuilderService } from './builder/form-builder.service';
-import { DynamicFormControlEvent, DynamicFormControlModel } from '@ng-dynamic-forms/core';
+import { DynamicFormControlEvent, DynamicFormControlModel, DynamicFormGroupModel } from '@ng-dynamic-forms/core';
 import { isEmpty, isNotUndefined } from '../empty.util';
 import { uniqueId } from 'lodash';
 import {
@@ -161,6 +161,15 @@ export class FormService {
       field.setErrors(error);
     }
 
+    // if the field in question is a group, pass down the error to its fields
+    if (field instanceof FormGroup && model instanceof DynamicFormGroupModel) {
+      model.group.forEach((subModel) => {
+        const subField = field.controls[subModel.id];
+
+        this.addErrorToField(subField, subModel, message);
+      });
+    }
+
     field.markAsTouched();
   }
 
@@ -173,6 +182,15 @@ export class FormService {
       field.setErrors(error);
     }
 
+    // if the field in question is a group, clear the error from its fields
+    if (field instanceof FormGroup && model instanceof DynamicFormGroupModel) {
+      model.group.forEach((subModel) => {
+        const subField = field.controls[subModel.id];
+
+        this.removeErrorFromField(subField, subModel, messageKey);
+      });
+    }
+
     field.markAsUntouched();
   }