Merge pull request #1812 from atmire/w2p-94301_Empty-required-name-input-not-displaying-error-message-after-saving

Fix error validation for required `name` fields in submission

Author: tdonohue

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html

@@ -22,7 +22,7 @@
       <div *ngIf="context?.index !== null
               && (!showErrorMessages || errorMessages.length === 0)" class="clearfix w-100 mb-2"></div>
 
-      <div *ngIf="showErrorMessages" [id]="id + '_errors'"
+      <div *ngIf="!model.hideErrorMessages && showErrorMessages" [id]="id + '_errors'"
            [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
         <small *ngFor="let message of errorMessages" class="invalid-feedback d-block">{{ message | translate: model.validators }}</small>
       </div>

src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model.ts

@@ -27,7 +27,7 @@ export interface DsDynamicInputModelConfig extends DynamicInputModelConfig {
   hasSelectableMetadata: boolean;
   metadataValue?: FormFieldMetadataValueObject;
   isModelOfInnerForm?: boolean;
-
+  hideErrorMessages?: boolean;
 }
 
 export class DsDynamicInputModel extends DynamicInputModel {
@@ -46,6 +46,7 @@ export class DsDynamicInputModel extends DynamicInputModel {
   @serializable() hasSelectableMetadata: boolean;
   @serializable() metadataValue: FormFieldMetadataValueObject;
   @serializable() isModelOfInnerForm: boolean;
+  @serializable() hideErrorMessages?: boolean;
 
 
   constructor(config: DsDynamicInputModelConfig, layout?: DynamicFormControlLayout) {
@@ -61,6 +62,7 @@ export class DsDynamicInputModel extends DynamicInputModel {
     this.metadataValue = config.metadataValue;
     this.place = config.place;
     this.isModelOfInnerForm = (hasValue(config.isModelOfInnerForm) ? config.isModelOfInnerForm : false);
+    this.hideErrorMessages = config.hideErrorMessages;
 
     this.language = config.language;
     if (!this.language) {

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

@@ -325,6 +325,14 @@ describe('FormBuilderService test suite', () => {
           typeBindRelations: [{ match: 'VISIBLE', operator: 'OR', when: [{id: 'dc.type', value: 'Book' }]}]
         },
       ),
+
+      new DynamicConcatModel({
+        id: 'testConcatGroup_CONCAT_GROUP',
+        group: [
+          new DynamicInputModel({ id: 'testConcatGroup_CONCAT_FIRST_INPUT' }),
+          new DynamicInputModel({ id: 'testConcatGroup_CONCAT_SECOND_INPUT' }),
+        ]
+      } as any)
     ];
 
     testFormConfiguration = {
@@ -463,6 +471,7 @@ describe('FormBuilderService test suite', () => {
     expect(service.findById('testTimePicker', testModel) instanceof DynamicTimePickerModel).toBe(true);
     expect(service.findById('testRating', testModel) instanceof DynamicRatingModel).toBe(true);
     expect(service.findById('testColorPicker', testModel) instanceof DynamicColorPickerModel).toBe(true);
+    expect(service.findById('testConcatGroup', testModel) instanceof DynamicConcatModel).toBe(true);
   });
 
   it('should find a nested dynamic form control model by id', () => {

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

@@ -116,8 +116,8 @@ export class FormBuilderService extends DynamicFormService {
         }
 
         if (this.isConcatGroup(controlModel)) {
-          if (controlModel.id.match(new RegExp(findId + CONCAT_GROUP_SUFFIX + `_\\d+$`))) {
-            result = (controlModel as DynamicConcatModel).group[0];
+          if (controlModel.id.match(new RegExp(findId + CONCAT_GROUP_SUFFIX))) {
+            result = (controlModel as DynamicConcatModel);
             break;
           }
         }

src/app/shared/form/builder/parsers/concat-field-parser.ts

@@ -1,11 +1,7 @@
 import {Inject} from '@angular/core';
 import { FormFieldModel } from '../models/form-field.model';
 import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
-import {
-  DynamicFormControlLayout,
-  DynamicInputModel,
-  DynamicInputModelConfig
-} from '@ng-dynamic-forms/core';
+import { DynamicFormControlLayout, } from '@ng-dynamic-forms/core';
 import {
   CONCAT_FIRST_INPUT_SUFFIX,
   CONCAT_GROUP_SUFFIX,
@@ -22,6 +18,7 @@ import {
   PARSER_OPTIONS,
   SUBMISSION_ID
 } from './field-parser';
+import { DsDynamicInputModel, DsDynamicInputModelConfig } from '../ds-dynamic-form-ui/models/ds-dynamic-input.model';
 
 export class ConcatFieldParser extends FieldParser {
 
@@ -58,21 +55,24 @@ export class ConcatFieldParser extends FieldParser {
     concatGroup.group = [];
     concatGroup.separator = this.separator;
 
-    const input1ModelConfig: DynamicInputModelConfig = this.initModel(
+    const input1ModelConfig: DsDynamicInputModelConfig = this.initModel(
       id + CONCAT_FIRST_INPUT_SUFFIX,
       false,
       true,
       true,
       false
     );
-    const input2ModelConfig: DynamicInputModelConfig = this.initModel(
+    const input2ModelConfig: DsDynamicInputModelConfig = this.initModel(
       id + CONCAT_SECOND_INPUT_SUFFIX,
       false,
       true,
       true,
       false
     );
 
+    input1ModelConfig.hideErrorMessages = true;
+    input2ModelConfig.hideErrorMessages = true;
+
     if (hasNoValue(concatGroup.hint) && hasValue(input1ModelConfig.hint) && hasNoValue(input2ModelConfig.hint)) {
       concatGroup.hint = input1ModelConfig.hint;
       input1ModelConfig.hint = undefined;
@@ -98,8 +98,8 @@ export class ConcatFieldParser extends FieldParser {
       input2ModelConfig.placeholder = placeholder[1];
     }
 
-    const model1 = new DynamicInputModel(input1ModelConfig, clsInput);
-    const model2 = new DynamicInputModel(input2ModelConfig, clsInput);
+    const model1 = new DsDynamicInputModel(input1ModelConfig, clsInput);
+    const model2 = new DsDynamicInputModel(input2ModelConfig, clsInput);
     concatGroup.group.push(model1);
     concatGroup.group.push(model2);
 

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,32 @@ describe('FormService test suite', () => {
     expect(formGroup.controls.description.touched).toBe(true);
   });
 
+  it('should add errors to fields of concat group', () => {
+    (builderService as any).isConcatGroup.and.returnValue(true);
+
+    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 +242,32 @@ describe('FormService test suite', () => {
     expect(formGroup.controls.description.touched).toBe(false);
   });
 
+  it('should remove errors from fields of concat group', () => {
+    (builderService as any).isConcatGroup.and.returnValue(true);
+
+    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 concat group, pass down the error to its fields
+    if (field instanceof FormGroup && model instanceof DynamicFormGroupModel && this.formBuilderService.isConcatGroup(model)) {
+      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 concat group, clear the error from its fields
+    if (field instanceof FormGroup && model instanceof DynamicFormGroupModel && this.formBuilderService.isConcatGroup(model)) {
+      model.group.forEach((subModel) => {
+        const subField = field.controls[subModel.id];
+
+        this.removeErrorFromField(subField, subModel, messageKey);
+      });
+    }
+
     field.markAsUntouched();
   }
 

src/app/shared/mocks/form-builder-service.mock.ts

@@ -19,6 +19,7 @@ export function getMockFormBuilderService(): FormBuilderService {
     isQualdropGroup: false,
     isModelInCustomGroup: true,
     isRelationGroup: true,
+    isConcatGroup: false,
     hasArrayGroupValue: true,
     getTypeBindModel: new DsDynamicInputModel({
         name: 'dc.type',