WEB-446: Validation of re-Age amount during submission

src/app/shared/input-amount/input-amount.component.html

@@ -20,6 +20,12 @@
   <mat-hint class="right-hint" *ngIf="displayHint">{{
     inputFormControl.value | currency: currency.code : currency.displaySymbol : '1.2-2'
   }}</mat-hint>
+  <mat-error *ngIf="minVal && inputFormControl.hasError('min')">
+    {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.Must be at least' | translate }} {{ minVal }}
+  </mat-error>
+  <mat-error *ngIf="maxVal && inputFormControl.hasError('max')">
+    {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.Must be less or equal to' | translate }} {{ maxVal }}
+  </mat-error>
 </mat-form-field>
 <mat-form-field appearance="fill" class="flex-100" *ngIf="!isRequired">
   <mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
@@ -37,4 +43,10 @@
   <mat-hint class="right-hint" *ngIf="displayHint">{{
     inputFormControl.value | currency: currency.code : currency.displaySymbol : '1.2-2'
   }}</mat-hint>
+  <mat-error *ngIf="minVal && inputFormControl.hasError('min')">
+    {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.Must be at least' | translate }} {{ minVal }}
+  </mat-error>
+  <mat-error *ngIf="maxVal && inputFormControl.hasError('max')">
+    {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.Must be less or equal to' | translate }} {{ maxVal }}
+  </mat-error>
 </mat-form-field>

src/app/shared/input-amount/input-amount.component.ts

@@ -1,8 +1,8 @@
 import { Component, Input } from '@angular/core';
 import { Currency } from '../models/general.model';
-import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
-import { NgIf, CurrencyPipe } from '@angular/common';
-import { MatFormField, MatLabel, MatError, MatHint, MatSuffix } from '@angular/material/form-field';
+import { UntypedFormControl } from '@angular/forms';
+import { CurrencyPipe } from '@angular/common';
+import { MatHint } from '@angular/material/form-field';
 import { FormatAmountDirective } from '../../directives/format-amount.directive';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
@@ -22,6 +22,8 @@ export class InputAmountComponent {
   @Input() currency: Currency;
   @Input() inputLabel: string;
   @Input() inputFormControl: UntypedFormControl;
+  @Input() minVal: number;
+  @Input() maxVal: number;
 
   displayHint = false;
 
@@ -39,12 +41,4 @@ export class InputAmountComponent {
     }
     return true;
   }
-
-  inputBlur(): void {
-    this.displayHint = false;
-  }
-
-  inputFocus(): void {
-    this.displayHint = true;
-  }
 }