fix: Display issues

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html

@@ -1,20 +1,20 @@
 <div class="layout-row-wrap responsive-column">
-  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Details' | translate }}</h3>
+  <h3 class="mat-h3 flex-100">{{ 'labels.heading.Details' | translate }}</h3>
 
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="flex-fill">
+  <mat-divider class="flex-100"></mat-divider>
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Product' | translate }}</span>
     <span class="flex-60">{{
       recurringDepositAccountData.productId | find: recurringDepositsAccountTemplate.productOptions : 'id' : 'name'
     }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Submitted On' | translate }}</span>
     <span class="flex-60">{{ recurringDepositAccountData.submittedOnDate | dateFormat }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Field Officer' | translate }}</span>
     <span class="flex-60">{{
       recurringDepositAccountData.fieldOfficerId
@@ -22,27 +22,27 @@
     }}</span>
   </div>
 
-  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Currency' | translate }}</h3>
+  <h3 class="mat-h3 flex-100">{{ 'labels.heading.Currency' | translate }}</h3>
 
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="flex-fill">
+  <mat-divider class="flex-100"></mat-divider>
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}</span>
     <span class="flex-60">{{ recurringDepositsAccountProductTemplate.currency.code }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}</span>
     <span class="flex-60">{{ recurringDepositsAccountProductTemplate.currency.decimalPlaces }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Currency In Multiples Of' | translate }}</span>
     <span class="flex-60">{{ recurringDepositsAccountProductTemplate.currency.inMultiplesOf }}</span>
   </div>
 
-  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Terms' | translate }}</h3>
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="flex-fill">
+  <h3 class="mat-h3 flex-100">{{ 'labels.heading.Terms' | translate }}</h3>
+  <mat-divider class="flex-100"></mat-divider>
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
     <span class="flex-60">{{
       recurringDepositAccountData.interestCompoundingPeriodType
@@ -51,7 +51,7 @@
     }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
     <span class="flex-60">{{
       recurringDepositAccountData.interestPostingPeriodType
@@ -60,7 +60,7 @@
     }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
     <span class="flex-60">{{
       recurringDepositAccountData.interestCalculationType
@@ -69,7 +69,7 @@
     }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Days in Year' | translate }}:</span>
     <span class="flex-60">{{
       recurringDepositAccountData.interestCalculationDaysInYearType
@@ -78,10 +78,10 @@
     }}</span>
   </div>
 
-  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Settings' | translate }}</h3>
+  <h3 class="mat-h3 flex-100">{{ 'labels.heading.Settings' | translate }}</h3>
 
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="flex-fill" *ngIf="recurringDepositAccountData.lockinPeriodFrequency">
+  <mat-divider class="flex-100"></mat-divider>
+  <div class="layout-row flex-100" *ngIf="recurringDepositAccountData.lockinPeriodFrequency">
     <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
     <span class="flex-60"
       >{{ recurringDepositAccountData.lockinPeriodFrequency }}
@@ -93,12 +93,12 @@
     >
   </div>
 
-  <div class="flex-fill" *ngIf="recurringDepositAccountData.mandatoryRecommendedDepositAmount">
+  <div class="layout-row flex-100" *ngIf="recurringDepositAccountData.mandatoryRecommendedDepositAmount">
     <span class="flex-40">{{ 'labels.inputs.Recurring Deposit Amount' | translate }}:</span>
     <span class="flex-60">{{ recurringDepositAccountData.mandatoryRecommendedDepositAmount | formatNumber }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Deposit Period' | translate }}:</span>
     <span class="flex-60"
       >{{ recurringDepositAccountData.depositPeriod }}
@@ -110,18 +110,18 @@
     >
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Deposit Frequency Same as Group/Center meeting' | translate }}:</span>
     <span class="flex-60">{{ recurringDepositsAccountProductTemplate.isCalendarInherited | yesNo }}</span>
   </div>
 
   <ng-container *ngIf="!recurringDepositsAccountProductTemplate.isCalendarInherited">
-    <div class="flex-fill">
+    <div class="layout-row flex-100">
       <span class="flex-40">{{ 'labels.inputs.Deposit Start Date' | translate }}:</span>
       <span class="flex-60">{{ recurringDepositAccountData.expectedFirstDepositOnDate | dateFormat }}</span>
     </div>
 
-    <div class="flex-fill">
+    <div class="layout-row flex-100">
       <span class="flex-40">{{ 'labels.inputs.Deposit Frequency' | translate }}:</span>
       <span *ngIf="recurringDepositAccountData.recurringFrequency" class="flex-60"
         >{{ recurringDepositAccountData.recurringFrequency }}
@@ -134,7 +134,7 @@
     </div>
   </ng-container>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Minimum Deposit Term' | translate }}:</span>
     <span class="flex-60"
       >{{
@@ -151,7 +151,7 @@
     >
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.In Multiples Of' | translate }}:</span>
     <span class="flex-60"
       >{{
@@ -168,7 +168,7 @@
     >
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Maximum Deposit Term' | translate }}</span>
     <span class="flex-60"
       >{{
@@ -185,166 +185,164 @@
     >
   </div>
 
-  <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Interest Rate Chart' | translate }}</h3>
+  <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Interest Rate Chart' | translate }}</h3>
 
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="margin-b layout-column flex-fill">
-    <div class="flex-fill" *ngIf="recurringDepositsAccountProductTemplate?.accountChart.name">
-      <span class="flex-40">{{ 'labels.inputs.name' | translate }}:</span>
-      <span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.name }}</span>
-    </div>
-
-    <div class="flex-fill">
-      <span class="flex-40">{{ 'labels.inputs.Valid from Date' | translate }}:</span>
-      <span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
-    </div>
-
-    <div class="flex-fill" *ngIf="recurringDepositsAccountProductTemplate?.accountChart.endDate">
-      <span class="flex-40">{{ 'labels.inputs.End Date' | translate }}:</span>
-      <span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</span>
-    </div>
-
-    <div class="flex-fill" *ngIf="recurringDepositsAccountProductTemplate?.accountChart.description">
-      <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
-      <span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.description }}</span>
-    </div>
-
-    <div class="flex-fill">
-      <span class="flex-40">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
-      <span class="flex-60">{{
-        recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo
-      }}</span>
-    </div>
-
-    <table class="mat-elevation-z1 irc-table" mat-table [dataSource]="interestRateChartData" multiTemplateDataRows>
-      <ng-container matColumnDef="period">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
-        <td mat-cell *matCellDef="let chartSlab">
-          {{ chartSlab.fromPeriod }} - {{ chartSlab.toPeriod }}&nbsp;{{
-            chartSlab.periodType.value | translateKey: 'catalogs'
-          }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="amountRange">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
-        <td mat-cell *matCellDef="let chartSlab">
-          {{ chartSlab.amountRangeFrom | formatNumber }} - {{ chartSlab.amountRangeTo | formatNumber }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="interest">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
-        <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.annualInterestRate | formatNumber }} %</td>
-      </ng-container>
-
-      <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
-        <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.description }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
-        <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
-          <button
-            mat-button
-            color="primary"
-            (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex"
-          >
-            <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
-              <fa-icon icon="eye" class="m-r-10"></fa-icon>
-              {{ 'labels.buttons.View Incentives' | translate }}
-            </span>
-            <span *ngIf="expandChartSlabIndex === chartSlabIndex">
-              <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-              {{ 'labels.buttons.Hide Incentives' | translate }}
-            </span>
-          </button>
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="incentives">
-        <td
-          mat-cell
-          *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
-          [attr.colspan]="chartSlabsDisplayedColumns.length"
-        >
-          <div
-            class="layout-row-wrap flex-fill incentives"
-            [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
-          >
-            <mat-card class="layout-row-wrap flex-fill">
-              <h4 class="m-b-10 flex-13">
-                {{ 'labels.heading.Incentives' | translate }}
-              </h4>
-
-              <table
-                class="flex-fill mat-elevation-z1"
-                mat-table
-                [dataSource]="chartSlab.incentives"
-                *ngIf="chartSlab.incentives.length"
-              >
-                <ng-container matColumnDef="entityType">
-                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
-                  <td mat-cell *matCellDef="let incentive">
-                    {{ incentive.entityType.value }}
-                  </td>
-                </ng-container>
-
-                <ng-container matColumnDef="attributeName">
-                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
-                  <td mat-cell *matCellDef="let incentive">
-                    {{ incentive.attributeName.value }}
-                  </td>
-                </ng-container>
-
-                <ng-container matColumnDef="conditionType">
-                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
-                  <td mat-cell *matCellDef="let incentive">
-                    {{ incentive.conditionType.value | titlecase }}
-                  </td>
-                </ng-container>
-
-                <ng-container matColumnDef="attributeValue">
-                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
-                  <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
-                    {{ incentive.attributeValueDesc }}
-                  </td>
-                </ng-container>
-
-                <ng-container matColumnDef="incentiveType">
-                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
-                  <td mat-cell *matCellDef="let incentive">
-                    {{ incentive.incentiveType.value }}
-                  </td>
-                </ng-container>
-
-                <ng-container matColumnDef="amount">
-                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
-                  <td mat-cell *matCellDef="let incentive">
-                    {{ incentive.amount }}
-                  </td>
-                </ng-container>
-
-                <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
-              </table>
-            </mat-card>
-          </div>
-        </td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
-    </table>
+  <mat-divider class="flex-100"></mat-divider>
+  <div class="layout-row flex-100" *ngIf="recurringDepositsAccountProductTemplate?.accountChart.name">
+    <span class="flex-40">{{ 'labels.inputs.name' | translate }}:</span>
+    <span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.name }}</span>
   </div>
 
-  <div *ngIf="recurringDepositAccountData.charges.length" class="layout-row-wrap responsive-column flex-fill">
-    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Charges' | translate }}</h3>
+  <div class="layout-row flex-100">
+    <span class="flex-40">{{ 'labels.inputs.Valid from Date' | translate }}:</span>
+    <span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
+  </div>
 
-    <mat-divider class="flex-fill"></mat-divider>
-    <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="recurringDepositAccountData.charges">
+  <div class="layout-row flex-100" *ngIf="recurringDepositsAccountProductTemplate?.accountChart.endDate">
+    <span class="flex-40">{{ 'labels.inputs.End Date' | translate }}:</span>
+    <span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</span>
+  </div>
+
+  <div class="layout-row flex-100" *ngIf="recurringDepositsAccountProductTemplate?.accountChart.description">
+    <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
+    <span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.description }}</span>
+  </div>
+
+  <div class="layout-row flex-100">
+    <span class="flex-40">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
+    <span class="flex-60">{{
+      recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo
+    }}</span>
+  </div>
+
+  <table class="mat-elevation-z1 irc-table" mat-table [dataSource]="interestRateChartData" multiTemplateDataRows>
+    <ng-container matColumnDef="period">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
+      <td mat-cell *matCellDef="let chartSlab">
+        {{ chartSlab.fromPeriod }} - {{ chartSlab.toPeriod }}&nbsp;{{
+          chartSlab.periodType.value | translateKey: 'catalogs'
+        }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="amountRange">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
+      <td mat-cell *matCellDef="let chartSlab">
+        {{ chartSlab.amountRangeFrom | formatNumber }} - {{ chartSlab.amountRangeTo | formatNumber }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="interest">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
+      <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.annualInterestRate | formatNumber }} %</td>
+    </ng-container>
+
+    <ng-container matColumnDef="description">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
+      <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.description }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
+      <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
+        <button
+          mat-button
+          color="primary"
+          (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex"
+        >
+          <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
+            <fa-icon icon="eye" class="m-r-10"></fa-icon>
+            {{ 'labels.buttons.View Incentives' | translate }}
+          </span>
+          <span *ngIf="expandChartSlabIndex === chartSlabIndex">
+            <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
+            {{ 'labels.buttons.Hide Incentives' | translate }}
+          </span>
+        </button>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="incentives">
+      <td
+        mat-cell
+        *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+        [attr.colspan]="chartSlabsDisplayedColumns.length"
+      >
+        <div
+          class="layout-row-wrap flex-100 incentives"
+          [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
+        >
+          <mat-card class="layout-row-wrap flex-100">
+            <h4 class="m-b-10 flex-13">
+              {{ 'labels.heading.Incentives' | translate }}
+            </h4>
+
+            <table
+              class="flex-100 mat-elevation-z1"
+              mat-table
+              [dataSource]="chartSlab.incentives"
+              *ngIf="chartSlab.incentives.length"
+            >
+              <ng-container matColumnDef="entityType">
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
+                <td mat-cell *matCellDef="let incentive">
+                  {{ incentive.entityType.value }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="attributeName">
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
+                <td mat-cell *matCellDef="let incentive">
+                  {{ incentive.attributeName.value }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="conditionType">
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
+                <td mat-cell *matCellDef="let incentive">
+                  {{ incentive.conditionType.value | titlecase }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="attributeValue">
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
+                <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
+                  {{ incentive.attributeValueDesc }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="incentiveType">
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
+                <td mat-cell *matCellDef="let incentive">
+                  {{ incentive.incentiveType.value }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="amount">
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
+                <td mat-cell *matCellDef="let incentive">
+                  {{ incentive.amount }}
+                </td>
+              </ng-container>
+
+              <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
+              <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
+            </table>
+          </mat-card>
+        </div>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
+  </table>
+
+  <div *ngIf="recurringDepositAccountData.charges.length" class="layout-row-wrap responsive-column flex-100">
+    <h3 class="mat-h3 flex-100">{{ 'labels.heading.Charges' | translate }}</h3>
+
+    <mat-divider class="flex-100"></mat-divider>
+    <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="recurringDepositAccountData.charges">
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
         <td mat-cell *matCellDef="let charge">

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.html

@@ -32,15 +32,15 @@
     </mat-form-field>
 
     <h4 class="mat-h4 flex-98">{{ 'labels.heading.Recurring Deposit Details' | translate }}</h4>
-
-    <mat-form-field class="flex-48">
-      <mat-label>{{ 'labels.inputs.Recurring Deposit Amount' | translate }}</mat-label>
-      <input type="number" matInput formControlName="mandatoryRecommendedDepositAmount" required />
-      <mat-error>
-        {{ 'labels.inputs.Recurring Deposit Amount' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-    </mat-form-field>
+    <mifosx-input-amount
+      [currency]="currency"
+      [isRequired]="true"
+      *ngIf="currency"
+      class="flex-48"
+      [inputFormControl]="recurringDepositAccountSettingsForm.controls.mandatoryRecommendedDepositAmount"
+      [inputLabel]="'Recurring Deposit Amount'"
+    >
+    </mifosx-input-amount>
 
     <h4 class="mat-h4 flex-98">{{ 'labels.heading.Deposit Period' | translate }}</h4>
 

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.ts

@@ -2,6 +2,7 @@
 import { Component, OnInit, Input, OnChanges } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
 import { SettingsService } from 'app/settings/settings.service';
+import { Currency } from 'app/shared/models/general.model';
 
 /** Custom Services */
 
@@ -32,6 +33,7 @@ export class RecurringDepositsAccountSettingsStepComponent implements OnInit, On
   preClosurePenalInterestOnTypeData: any;
   /** Tax Group */
   taxGroup: any;
+  currency: Currency | null = null;
 
   /**
    * @param {FormBuilder} formBuilder Form Builder
@@ -50,6 +52,7 @@ export class RecurringDepositsAccountSettingsStepComponent implements OnInit, On
       ? this.recurringDepositsAccountProductTemplate
       : this.recurringDepositsAccountTemplate;
     if (recurringDepositsAccount) {
+      this.currency = recurringDepositsAccount.currency;
       this.recurringDepositAccountSettingsForm.patchValue({
         isMandatoryDeposit: recurringDepositsAccount.isMandatoryDeposit,
         adjustAdvanceTowardsFuturePayments: recurringDepositsAccount.adjustAdvanceTowardsFuturePayments,