[AAE-34481] Field error message has preserved space (#10820)

* [AAE-34481] field error message has preserved space * [AAE-34481] updated class name among components * [AAE-34481] removed redundant code
2025-05-12 17:04:57 +00:00 · 2025-04-25 10:45:24 +02:00 · 2025-04-25 10:45:24 +02:00 · cb220968cf
commit cb220968cf
parent 50ad04aeb3
13 changed files with 62 additions and 24 deletions
--- a/lib/core/src/lib/form/components/form-renderer.component.scss
+++ b/lib/core/src/lib/form/components/form-renderer.component.scss
@ -243,3 +243,7 @@ form-field {
        line-height: normal;
    }
 }
+
+.adf-error-messages-container {
+    min-height: 35px;
+}
--- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.html
+++ b/lib/core/src/lib/form/components/widgets/amount/amount.widget.html
@ -30,7 +30,12 @@
                (blur)="markAsTouched()"
            />
        </mat-form-field>
-        <error-widget [error]="field.validationSummary" />
-        <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
+        <div class="adf-error-messages-container">
+            <error-widget [error]="field.validationSummary" />
+            <error-widget
+                *ngIf="isInvalidFieldRequired() && isTouched()"
+                required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
+            />
+        </div>
    </div>
 </div>
--- a/lib/core/src/lib/form/components/widgets/base-viewer/base-viewer.widget.html
+++ b/lib/core/src/lib/form/components/widgets/base-viewer/base-viewer.widget.html
@ -9,5 +9,7 @@
                [fileName]="field.value.fileName"
                [showViewer]="field.value?.blobFile || field.value?.urlFile"
                [allowGoBack]="false" />
-    <error-widget [error]="field.validationSummary" />
+    <div class="adf-error-messages-container">
+        <error-widget [error]="field.validationSummary" />
+    </div>
 </div>
--- a/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.html
+++ b/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.html
@ -12,7 +12,11 @@
        {{ field.name | translate }}
        <span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
    </mat-checkbox>
-    <error-widget [error]="field.validationSummary" />
-    <error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
-                  required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
+    <div class="adf-error-messages-container">
+        <error-widget [error]="field.validationSummary" />
+        <error-widget
+            *ngIf="isInvalidFieldRequired() && isTouched()"
+            required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
+        />
+    </div>
 </div>
--- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
+++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
@ -32,6 +32,8 @@
                [timeInterval]="5"
                [disabled]="field.readOnly" />
        </mat-form-field>
-        <error-widget *ngIf="datetimeInputControl.invalid && datetimeInputControl.touched" [error]="field.validationSummary" />
+        <div class="adf-error-messages-container">
+            <error-widget *ngIf="datetimeInputControl.invalid && datetimeInputControl.touched" [error]="field.validationSummary" />
+        </div>
    </div>
 </div>
--- a/lib/core/src/lib/form/components/widgets/date/date.widget.html
+++ b/lib/core/src/lib/form/components/widgets/date/date.widget.html
@ -18,5 +18,10 @@
                        [startAt]="startAt"
                        [disabled]="field.readOnly" />
    </mat-form-field>
-    <error-widget *ngIf="dateInputControl.invalid && dateInputControl.touched" [error]="field.validationSummary" />
+    <div class="adf-error-messages-container">
+        <error-widget
+            *ngIf="dateInputControl.invalid && dateInputControl.touched"
+            [error]="field.validationSummary"
+        />
+    </div>
 </div>
--- a/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html
+++ b/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html
@ -28,8 +28,12 @@
                   (blur)="markAsTouched()" />
        </mat-form-field>

-        <error-widget [error]="field.validationSummary" />
-        <error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
-                      required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
+        <div class="adf-error-messages-container">
+            <error-widget [error]="field.validationSummary" />
+            <error-widget
+                *ngIf="isInvalidFieldRequired() && isTouched()"
+                required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
+            />
+        </div>
    </div>
 </div>
--- a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html
+++ b/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html
@ -23,9 +23,13 @@
    <div *ngIf="field.maxLength > 0" class="adf-multiline-word-counter">
        <span class="adf-multiline-word-counter-value">{{ field?.value?.length || 0 }}/{{ field.maxLength }}</span>
    </div>
-    <error-widget [error]="field.validationSummary" />
-    <error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
-                  class="adf-multiline-required-message"
-                  required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
+    <div class="adf-error-messages-container">
+        <error-widget [error]="field.validationSummary" />
+        <error-widget
+            *ngIf="isInvalidFieldRequired() && isTouched()"
+            class="adf-multiline-required-message"
+            required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
+        />
+    </div>
 </div>

--- a/lib/core/src/lib/form/components/widgets/number/number.widget.html
+++ b/lib/core/src/lib/form/components/widgets/number/number.widget.html
@ -27,8 +27,12 @@
                   [title]="field.tooltip"
                   (blur)="markAsTouched()">
        </mat-form-field>
-        <error-widget [error]="field.validationSummary" />
-        <error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
-                      required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
+        <div class="adf-error-messages-container">
+            <error-widget [error]="field.validationSummary" />
+            <error-widget
+                *ngIf="isInvalidFieldRequired() && isTouched()"
+                required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
+            />
+        </div>
    </div>
 </div>
--- a/lib/core/src/lib/form/components/widgets/text/text.widget.html
+++ b/lib/core/src/lib/form/components/widgets/text/text.widget.html
@ -26,8 +26,10 @@
                   [title]="field.tooltip"
                   (blur)="markAsTouched()">
        </mat-form-field>
-        <error-widget [error]="field.validationSummary" />
-        <error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
-                      required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
+        <div class="adf-error-messages-container">
+            <error-widget [error]="field.validationSummary" />
+            <error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
+            required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
+        </div>
    </div>
 </div>
--- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
@ -35,6 +35,8 @@
            <mat-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly" />
            <mat-datepicker #datePicker [startAt]="startAt" [disabled]="field.readOnly" />
        </mat-form-field>
-        <error-widget *ngIf="dateInputControl.invalid && dateInputControl.touched" [error]="field.validationSummary" />
+        <div class="adf-error-messages-container">
+            <error-widget *ngIf="dateInputControl.invalid && dateInputControl.touched" [error]="field.validationSummary" />
+        </div>
    </div>
 </div>
--- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html
@ -59,7 +59,7 @@
    </mat-form-field>
    <mat-progress-bar *ngIf="validationLoading" mode="indeterminate" />

-    <div class="adf-error-container">
+    <div class="adf-error-container adf-error-messages-container">
        <mat-error *ngIf="hasPreselectError() &&  !isValidationLoading()" [@transitionMessages]="subscriptAnimationState" class="adf-error">
            <mat-icon class="adf-error-icon">error_outline</mat-icon>
            <div class="adf-error-text">{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</div>
--- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
@ -73,7 +73,7 @@

    <mat-progress-bar *ngIf="validationLoading" mode="indeterminate" />

-    <div class="adf-error-container" *ngIf="showErrors">
+    <div class="adf-error-container adf-error-messages-container" *ngIf="showErrors">
        <mat-error *ngIf="hasPreselectError() && !isValidationLoading()" [@transitionMessages]="subscriptAnimationState" class="adf-error">
            <mat-icon class="adf-error-icon">error_outline</mat-icon>
            <div class="adf-error-text">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: validateUsersMessage } }}</div>