AAE-43974 Refactoring added for text and amount form widgets

lib/core/src/lib/form/components/widgets/amount/amount.widget.html

@@ -10,7 +10,7 @@
         >
     </div>
     <div class="adf-amount-widget-container">
-        <mat-form-field class="adf-amount-widget__input adf-form-field-input" [floatLabel]="placeholder ? 'always' : null">
+        <mat-form-field class="adf-amount-widget__input adf-form-field-input" [floatLabel]="placeholder ? 'always' : null" subscriptSizing="fixed">
             @if ( (field.name || field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">{{field.name | translate }}</mat-label> }
             @if(!enableDisplayBasedOnLocale) {
                 <span matTextPrefix class="adf-amount-widget__prefix-spacing">{{ currency }}&nbsp;</span>
@@ -27,16 +27,16 @@
                 [(ngModel)]="amountWidgetValue"
                 (ngModelChange)="onFieldChangedAmountWidget()"
                 [disabled]="field.readOnly"
+                [errorStateMatcher]="errorStateMatcher"
                 (focus)="amountWidgetOnFocus()"
                 (blur)="amountWidgetOnBlur()"
                 />
+            <mat-error *ngIf="field.validationSummary?.message">
+                {{ field.validationSummary.message | translate:translateParameters }}
+            </mat-error>
+            <mat-error *ngIf="isInvalidFieldRequired() && isTouched()">
+                {{ 'FORM.FIELD.REQUIRED' | translate }}
+            </mat-error>
         </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>

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

@@ -19,11 +19,11 @@
 
 import { CurrencyPipe, NgIf } from '@angular/common';
 import { Component, OnInit, ViewEncapsulation, InjectionToken, inject, DestroyRef } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, FormGroupDirective, NgForm, UntypedFormControl } from '@angular/forms';
+import { ErrorStateMatcher } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { TranslatePipe } from '@ngx-translate/core';
-import { ErrorWidgetComponent } from '../error/error.component';
 import { WidgetComponent } from '../widget.component';
 import { filter, isObservable, Observable } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -52,7 +52,7 @@ export const ADF_AMOUNT_SETTINGS = new InjectionToken<Observable<AmountWidgetSet
         '(invalid)': 'event($event)',
         '(select)': 'event($event)'
     },
-    imports: [MatFormFieldModule, MatInputModule, FormsModule, ErrorWidgetComponent, TranslatePipe, NgIf],
+    imports: [MatFormFieldModule, MatInputModule, FormsModule, TranslatePipe, NgIf],
     providers: [CurrencyPipe],
     encapsulation: ViewEncapsulation.None
 })
@@ -69,11 +69,13 @@ export class AmountWidgetComponent extends WidgetComponent implements OnInit {
     currencyDisplay: string | boolean = 'symbol';
     decimalProperty: string;
     enableDisplayBasedOnLocale: boolean;
+    errorStateMatcher: ErrorStateMatcher;
     isInputInFocus = false;
     locale: string;
     notShowDecimalDigits = '1.0-0';
     showDecimalDigits = '1.2-2';
     showReadonlyPlaceholder: boolean;
+    translateParameters: Record<string, string> = {};
     valueAsNumber: number;
 
     get placeholder(): string {
@@ -117,6 +119,23 @@ export class AmountWidgetComponent extends WidgetComponent implements OnInit {
             }
             this.subscribeToFieldChanges();
             this.setInitialValues();
+            this.initErrorStateMatcher();
+            this.updateTranslateParameters();
+        }
+    }
+
+    private initErrorStateMatcher(): void {
+        this.errorStateMatcher = {
+            isErrorState: (_control: UntypedFormControl | null, _form: FormGroupDirective | NgForm | null): boolean =>
+                !this.field.isValid && this.isTouched()
+        };
+    }
+
+    private updateTranslateParameters(): void {
+        if (this.field.validationSummary?.isActive()) {
+            this.translateParameters = this.field.validationSummary.getAttributesAsJsonObj();
+        } else {
+            this.translateParameters = {};
         }
     }
 
@@ -138,6 +157,7 @@ export class AmountWidgetComponent extends WidgetComponent implements OnInit {
             }
         }
         this.markAsTouched();
+        this.updateTranslateParameters();
     }
 
     amountWidgetOnFocus(): void {
@@ -156,6 +176,8 @@ export class AmountWidgetComponent extends WidgetComponent implements OnInit {
     onFieldChangedAmountWidget(): void {
         this.field.value = this.amountWidgetValue;
         super.onFieldChanged(this.field);
+        this.markAsTouched();
+        this.updateTranslateParameters();
     }
 
     setInitialValues(): void {
@@ -180,6 +202,7 @@ export class AmountWidgetComponent extends WidgetComponent implements OnInit {
                 } else if (!this.isInputInFocus) {
                     this.amountWidgetValue = ev.field.value;
                 }
+                this.updateTranslateParameters();
             });
     }
 

lib/core/src/lib/form/components/widgets/text/text.widget.html

@@ -8,7 +8,7 @@
         </label>
     </div>
     <div class="adf-text-widget-container">
-        <mat-form-field class="adf-form-field-input" [floatLabel]="placeholder ? 'always' : null">
+        <mat-form-field class="adf-form-field-input" [floatLabel]="placeholder ? 'always' : null" subscriptSizing="fixed">
             @if ( (field.name || this.field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">
                 {{ field.name | translate }}
             </mat-label>
@@ -20,20 +20,24 @@
                    [required]="field.required"
                    [value]="field.value"
                    [(ngModel)]="field.value"
-                   (ngModelChange)="onFieldChanged(field)"
+                   (ngModelChange)="onTextFieldChanged()"
                    [disabled]="field.readOnly || readOnly"
                    [textMask]="{mask: mask, isReversed: isMaskReversed}"
                    [placeholder]="placeholder"
                    [title]="field.tooltip"
-                   (blur)="markAsTouched()">
+                   [errorStateMatcher]="errorStateMatcher"
+                   (blur)="onBlur()">
+            @if (field.validationSummary?.message) {
+                <mat-error>
+                    {{ field.validationSummary.message | translate:translateParameters }}
+                </mat-error>
+            }
+            @if (isInvalidFieldRequired() && isTouched()) {
+                <mat-error>
+                    {{ 'FORM.FIELD.REQUIRED' | translate }}
+                </mat-error>
+            }
         </mat-form-field>
-        <ng-container *ngTemplateOutlet="fieldStatusTemplate ?? defaultErrorMessageTemplate; context: { $implicit: this }" />
+        <ng-container *ngTemplateOutlet="fieldStatusTemplate ?? null" />
-        <ng-template #defaultErrorMessageTemplate>
-            <div class="adf-error-messages-container">
-                <error-widget [error]="field.validationSummary" />
-                <error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
-                              required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
-            </div>
-        </ng-template>
     </div>
 </div>

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

@@ -20,15 +20,16 @@
 import { NgIf, NgTemplateOutlet } from '@angular/common';
 import { Component, DestroyRef, Directive, inject, InjectionToken, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, FormGroupDirective, NgForm, UntypedFormControl } from '@angular/forms';
+import { ErrorStateMatcher } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { TranslatePipe } from '@ngx-translate/core';
 import { isObservable } from 'rxjs';
 import { ADF_CUSTOM_MESSAGE } from '../core/custom-validation-message.token';
-import { ErrorWidgetComponent } from '../error/error.component';
 import { WidgetComponent } from '../widget.component';
 import { InputMaskDirective } from './text-mask.component';
+import { IconModule } from '../../../../icon/icon.module';
 
 type FieldStatusTemplate = TemplateRef<{ $implicit: WidgetComponent }>;
 const FIELD_STATUS_TEMPLATE = new InjectionToken<FieldStatusTemplate>('FIELD_STATUS_TEMPLATE');
@@ -63,7 +64,7 @@ export class FieldStatusTemplateDirective {
         '(invalid)': 'event($event)',
         '(select)': 'event($event)'
     },
-    imports: [NgIf, TranslatePipe, MatFormFieldModule, MatInputModule, FormsModule, ErrorWidgetComponent, InputMaskDirective, NgTemplateOutlet],
+    imports: [NgIf, TranslatePipe, MatFormFieldModule, MatInputModule, FormsModule, InputMaskDirective, NgTemplateOutlet, IconModule],
     encapsulation: ViewEncapsulation.None
 })
 export class TextWidgetComponent extends WidgetComponent implements OnInit {
@@ -71,6 +72,8 @@ export class TextWidgetComponent extends WidgetComponent implements OnInit {
     placeholder: string;
     isMaskReversed: boolean;
     fieldStatusTemplate = inject(FIELD_STATUS_TEMPLATE, { optional: true });
+    errorStateMatcher: ErrorStateMatcher;
+    translateParameters: Record<string, string> = {};
 
     private readonly destroyRef = inject(DestroyRef);
     private readonly enableCustomMessage = inject(ADF_CUSTOM_MESSAGE, { optional: true });
@@ -98,5 +101,31 @@ export class TextWidgetComponent extends WidgetComponent implements OnInit {
                     : this.field.placeholder;
             this.isMaskReversed = this.field.params['inputMaskReversed'] ? this.field.params['inputMaskReversed'] : false;
         }
+        this.initErrorStateMatcher();
+    }
+
+    private initErrorStateMatcher(): void {
+        this.errorStateMatcher = {
+            isErrorState: (_control: UntypedFormControl | null, _form: FormGroupDirective | NgForm | null): boolean =>
+                !this.field.isValid && this.isTouched()
+        };
+    }
+
+    private updateTranslateParameters(): void {
+        if (this.field.validationSummary?.isActive()) {
+            this.translateParameters = this.field.validationSummary.getAttributesAsJsonObj();
+        } else {
+            this.translateParameters = {};
+        }
+    }
+
+    onBlur(): void {
+        this.markAsTouched();
+        this.updateTranslateParameters();
+    }
+
+    onTextFieldChanged(): void {
+        this.onFieldChanged(this.field);
+        this.updateTranslateParameters();
     }
 }