[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
This commit is contained in:
tomasz hanaj 2025-04-25 10:45:24 +02:00 committed by GitHub
parent 50ad04aeb3
commit cb220968cf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 62 additions and 24 deletions

View File

@ -243,3 +243,7 @@ form-field {
line-height: normal;
}
}
.adf-error-messages-container {
min-height: 35px;
}

View File

@ -30,7 +30,12 @@
(blur)="markAsTouched()"
/>
</mat-form-field>
<div class="adf-error-messages-container">
<error-widget [error]="field.validationSummary" />
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
<error-widget
*ngIf="isInvalidFieldRequired() && isTouched()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
/>
</div>
</div>
</div>

View File

@ -9,5 +9,7 @@
[fileName]="field.value.fileName"
[showViewer]="field.value?.blobFile || field.value?.urlFile"
[allowGoBack]="false" />
<div class="adf-error-messages-container">
<error-widget [error]="field.validationSummary" />
</div>
</div>

View File

@ -12,7 +12,11 @@
{{ field.name | translate }}
<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
</mat-checkbox>
<div class="adf-error-messages-container">
<error-widget [error]="field.validationSummary" />
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
<error-widget
*ngIf="isInvalidFieldRequired() && isTouched()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
/>
</div>
</div>

View File

@ -32,6 +32,8 @@
[timeInterval]="5"
[disabled]="field.readOnly" />
</mat-form-field>
<div class="adf-error-messages-container">
<error-widget *ngIf="datetimeInputControl.invalid && datetimeInputControl.touched" [error]="field.validationSummary" />
</div>
</div>
</div>

View File

@ -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>

View File

@ -28,8 +28,12 @@
(blur)="markAsTouched()" />
</mat-form-field>
<div class="adf-error-messages-container">
<error-widget [error]="field.validationSummary" />
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
<error-widget
*ngIf="isInvalidFieldRequired() && isTouched()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
/>
</div>
</div>
</div>

View File

@ -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>
<div class="adf-error-messages-container">
<error-widget [error]="field.validationSummary" />
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
<error-widget
*ngIf="isInvalidFieldRequired() && isTouched()"
class="adf-multiline-required-message"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
/>
</div>
</div>

View File

@ -27,8 +27,12 @@
[title]="field.tooltip"
(blur)="markAsTouched()">
</mat-form-field>
<div class="adf-error-messages-container">
<error-widget [error]="field.validationSummary" />
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
<error-widget
*ngIf="isInvalidFieldRequired() && isTouched()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
/>
</div>
</div>
</div>

View File

@ -26,8 +26,10 @@
[title]="field.tooltip"
(blur)="markAsTouched()">
</mat-form-field>
<div class="adf-error-messages-container">
<error-widget [error]="field.validationSummary" />
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
</div>
</div>
</div>

View File

@ -35,6 +35,8 @@
<mat-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly" />
<mat-datepicker #datePicker [startAt]="startAt" [disabled]="field.readOnly" />
</mat-form-field>
<div class="adf-error-messages-container">
<error-widget *ngIf="dateInputControl.invalid && dateInputControl.touched" [error]="field.validationSummary" />
</div>
</div>
</div>

View File

@ -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>

View File

@ -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>