AAE-40741 Form rule Validate form doesn't do anything (#11788)

lib/core/src/lib/form/components/widgets/core/form.model.spec.ts

@@ -79,6 +79,11 @@ describe('FormModel', () => {
         expect(form.readOnly).toBeTruthy();
     });
 
+    it('should have showAllValidationErrors default to false', () => {
+        const form = new FormModel({});
+        expect(form.showAllValidationErrors).toBe(false);
+    });
+
     it('should set form values when variable value is 0', () => {
         const variables = {
             pfx_property_one: 0

lib/core/src/lib/form/components/widgets/core/form.model.ts

@@ -94,6 +94,7 @@ export class FormModel implements ProcessFormModel {
     className: string;
     readOnly = false;
     isValid = true;
+    showAllValidationErrors = false;
     processVariables: ProcessVariableModel[] = [];
     variables: FormVariableModel[] = [];
     enableParentVisibilityCheck: boolean = false;

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts

@@ -526,4 +526,38 @@ describe('DateTimeWidgetComponent', () => {
             expect(asterisk?.textContent).toEqual('*');
         });
     });
+
+    describe('showAllValidationErrors', () => {
+        it('should mark datetimeInputControl as touched when showAllValidationErrors is true', () => {
+            widget.field = new FormFieldModel(form, {
+                id: 'datetime-id',
+                name: 'datetime-name',
+                type: FormFieldTypes.DATETIME,
+                required: true
+            });
+            fixture.detectChanges();
+
+            expect(widget.datetimeInputControl.touched).toBe(false);
+
+            form.showAllValidationErrors = true;
+            widget.updateReactiveFormControl();
+
+            expect(widget.datetimeInputControl.touched).toBe(true);
+        });
+
+        it('should not mark datetimeInputControl as touched when showAllValidationErrors is false', () => {
+            widget.field = new FormFieldModel(form, {
+                id: 'datetime-id',
+                name: 'datetime-name',
+                type: FormFieldTypes.DATETIME,
+                required: true
+            });
+            fixture.detectChanges();
+
+            form.showAllValidationErrors = false;
+            widget.updateReactiveFormControl();
+
+            expect(widget.datetimeInputControl.touched).toBe(false);
+        });
+    });
 });

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts

@@ -71,6 +71,9 @@ export class DateTimeWidgetComponent extends WidgetComponent implements OnInit,
     updateReactiveFormControl(): void {
         this.setFormControlValue();
         this.updateFormControlState();
+        if (this.field?.form?.showAllValidationErrors) {
+            this.datetimeInputControl.markAsTouched();
+        }
         this.validateField();
     }
 

lib/core/src/lib/form/components/widgets/date/date.widget.spec.ts

@@ -340,4 +340,38 @@ describe('DateWidgetComponent', () => {
 
         expect(dateElement.value).toContain('03-02-2020');
     });
+
+    describe('showAllValidationErrors', () => {
+        it('should mark dateInputControl as touched when showAllValidationErrors is true', () => {
+            widget.field = new FormFieldModel(form, {
+                id: 'date-field-id',
+                name: 'date-name',
+                type: FormFieldTypes.DATE,
+                required: true
+            });
+            fixture.detectChanges();
+
+            expect(widget.dateInputControl.touched).toBe(false);
+
+            form.showAllValidationErrors = true;
+            widget.updateReactiveFormControl();
+
+            expect(widget.dateInputControl.touched).toBe(true);
+        });
+
+        it('should not mark dateInputControl as touched when showAllValidationErrors is false', () => {
+            widget.field = new FormFieldModel(form, {
+                id: 'date-field-id',
+                name: 'date-name',
+                type: FormFieldTypes.DATE,
+                required: true
+            });
+            fixture.detectChanges();
+
+            form.showAllValidationErrors = false;
+            widget.updateReactiveFormControl();
+
+            expect(widget.dateInputControl.touched).toBe(false);
+        });
+    });
 });

lib/core/src/lib/form/components/widgets/date/date.widget.ts

@@ -80,6 +80,9 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit, Reac
 
     updateReactiveFormControl(): void {
         this.updateFormControlState();
+        if (this.field?.form?.showAllValidationErrors) {
+            this.dateInputControl.markAsTouched();
+        }
         this.validateField();
     }
 

lib/core/src/lib/form/components/widgets/widget.component.spec.ts

@@ -152,4 +152,31 @@ describe('WidgetComponent', () => {
             expect(widget.isInvalidFieldRequired()).toBe(false);
         });
     });
+
+    describe('isTouched', () => {
+        it('should return false by default', () => {
+            widget.field = new FormFieldModel(new FormModel(), { type: 'text' });
+            expect(widget.isTouched()).toBe(false);
+        });
+
+        it('should return true when touched is set', () => {
+            widget.field = new FormFieldModel(new FormModel(), { type: 'text' });
+            widget.markAsTouched();
+            expect(widget.isTouched()).toBe(true);
+        });
+
+        it('should return true when showAllValidationErrors is set on the form', () => {
+            const form = new FormModel();
+            form.showAllValidationErrors = true;
+            widget.field = new FormFieldModel(form, { type: 'text' });
+            expect(widget.isTouched()).toBe(true);
+        });
+
+        it('should return false when showAllValidationErrors is false and not touched', () => {
+            const form = new FormModel();
+            form.showAllValidationErrors = false;
+            widget.field = new FormFieldModel(form, { type: 'text' });
+            expect(widget.isTouched()).toBe(false);
+        });
+    });
 });

lib/core/src/lib/form/components/widgets/widget.component.ts

@@ -80,7 +80,7 @@ export class WidgetComponent implements AfterViewInit {
     }
 
     isTouched(): boolean {
-        return this.touched;
+        return this.touched || !!this.field?.form?.showAllValidationErrors;
     }
 
     hasValue(): boolean {

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts

@@ -510,4 +510,38 @@ describe('DateCloudWidgetComponent', () => {
             expect(widget.field.validationSummary.message).toBe('FORM.FIELD.REQUIRED');
         });
     });
+
+    describe('showAllValidationErrors', () => {
+        it('should mark dateInputControl as touched when showAllValidationErrors is true', () => {
+            widget.field = new FormFieldModel(form, {
+                id: 'date-field-id',
+                name: 'date-name',
+                type: 'date',
+                required: true
+            });
+            fixture.detectChanges();
+
+            expect(widget.dateInputControl.touched).toBe(false);
+
+            form.showAllValidationErrors = true;
+            widget.updateReactiveFormControl();
+
+            expect(widget.dateInputControl.touched).toBe(true);
+        });
+
+        it('should not mark dateInputControl as touched when showAllValidationErrors is false', () => {
+            widget.field = new FormFieldModel(form, {
+                id: 'date-field-id',
+                name: 'date-name',
+                type: 'date',
+                required: true
+            });
+            fixture.detectChanges();
+
+            form.showAllValidationErrors = false;
+            widget.updateReactiveFormControl();
+
+            expect(widget.dateInputControl.touched).toBe(false);
+        });
+    });
 });

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts

@@ -88,6 +88,9 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
     updateReactiveFormControl(): void {
         this.setFormControlValue();
         this.updateFormControlState();
+        if (this.field?.form?.showAllValidationErrors) {
+            this.dateInputControl.markAsTouched();
+        }
         this.validateField();
     }
 

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts

@@ -1410,6 +1410,44 @@ describe('DropdownCloudWidgetComponent', () => {
             expect(allOptions.length).toEqual(1);
         });
     });
+
+    describe('showAllValidationErrors', () => {
+        it('should mark dropdownControl as touched when showAllValidationErrors is true', () => {
+            const form = new FormModel();
+            widget.field = new FormFieldModel(form, {
+                id: 'dropdown-id',
+                name: 'dropdown-name',
+                type: FormFieldTypes.DROPDOWN,
+                required: true,
+                options: fakeOptionList
+            });
+            fixture.detectChanges();
+
+            expect(widget.dropdownControl.touched).toBe(false);
+
+            form.showAllValidationErrors = true;
+            widget.updateReactiveFormControl();
+
+            expect(widget.dropdownControl.touched).toBe(true);
+        });
+
+        it('should not mark dropdownControl as touched when showAllValidationErrors is false', () => {
+            const form = new FormModel();
+            widget.field = new FormFieldModel(form, {
+                id: 'dropdown-id',
+                name: 'dropdown-name',
+                type: FormFieldTypes.DROPDOWN,
+                required: true,
+                options: fakeOptionList
+            });
+            fixture.detectChanges();
+
+            form.showAllValidationErrors = false;
+            widget.updateReactiveFormControl();
+
+            expect(widget.dropdownControl.touched).toBe(false);
+        });
+    });
 });
 
 describe('DropdownCloudWidgetComponent instantiated by FormFieldComponent wrapper', () => {

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts

@@ -165,6 +165,9 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
         this.setFormControlValue();
 
         this.updateFormControlState();
+        if (this.field?.form?.showAllValidationErrors) {
+            this.dropdownControl.markAsTouched();
+        }
         this.handleErrors();
     }
 

lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.spec.ts

@@ -349,4 +349,42 @@ describe('DropdownWidgetComponent', () => {
             });
         });
     });
+
+    describe('showAllValidationErrors', () => {
+        it('should mark dropdownControl as touched when showAllValidationErrors is true', () => {
+            const form = new FormModel();
+            widget.field = new FormFieldModel(form, {
+                id: 'dropdown-id',
+                name: 'dropdown-name',
+                type: FormFieldTypes.DROPDOWN,
+                required: true,
+                options: fakeOptionList
+            });
+            fixture.detectChanges();
+
+            expect(widget.dropdownControl.touched).toBe(false);
+
+            form.showAllValidationErrors = true;
+            widget.updateReactiveFormControl();
+
+            expect(widget.dropdownControl.touched).toBe(true);
+        });
+
+        it('should not mark dropdownControl as touched when showAllValidationErrors is false', () => {
+            const form = new FormModel();
+            widget.field = new FormFieldModel(form, {
+                id: 'dropdown-id',
+                name: 'dropdown-name',
+                type: FormFieldTypes.DROPDOWN,
+                required: true,
+                options: fakeOptionList
+            });
+            fixture.detectChanges();
+
+            form.showAllValidationErrors = false;
+            widget.updateReactiveFormControl();
+
+            expect(widget.dropdownControl.touched).toBe(false);
+        });
+    });
 });

lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.ts

@@ -100,6 +100,9 @@ export class DropdownWidgetComponent extends WidgetComponent implements OnInit,
 
     updateReactiveFormControl(): void {
         this.updateFormControlState();
+        if (this.field?.form?.showAllValidationErrors) {
+            this.dropdownControl.markAsTouched();
+        }
         this.handleErrors();
     }