Upgrade/angular 14 (#1853)

* Fix Loan product Payment Allocation

* Upgrade to Angular 14

---------

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

.github/workflows/build.yml

@@ -29,7 +29,7 @@ jobs:
           # lts/gallium node v19.7.0 (npm v9.5.0)
           node-version: '19.7.0'
       - name: Angular CLI install
-        run : npm install -g --silent @angular/cli@13.3.10
+        run : npm install -g --silent @angular/cli@14.2.12
 
       - name: Npm install
         run: npm install

.gitignore

@@ -53,3 +53,4 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+.vscode/

README.md

@@ -20,7 +20,7 @@ The latest code is continuously deployed at https://openmf.github.io/web-app/ wh
 
 2. Install [angular-cli](https://github.com/angular/angular-cli) globally.
 ```
-npm install -g @angular/cli@13.3.10
+npm install -g @angular/cli@14.2.12
 ```
 
 3. Clone the project locally into your system.

angular.json

@@ -80,7 +80,6 @@
               "optimization": false,
               "sourceMap": true,
               "namedChunks": true,
-              "outputHashing": "all",
               "extractLicenses": true,
               "aot": true,
               "buildOptimizer": true,
@@ -230,6 +229,5 @@
         }
       }
     }
-  },
-  "defaultProject": "mifosx-web-app"
+  }
 }

package.json

@@ -29,20 +29,20 @@
     "cypress:run": "cypress run"
   },
   "dependencies": {
-    "@angular-devkit/schematics": "^14.0.4",
-    "@angular-material-components/datetime-picker": "^7.0.0",
-    "@angular/animations": "^13.3.12",
-    "@angular/cdk": "13.3.9",
-    "@angular/common": "13.3.12",
-    "@angular/compiler": "13.3.12",
-    "@angular/core": "13.3.12",
-    "@angular/flex-layout": "13.0.0-beta.38",
-    "@angular/forms": "13.3.12",
-    "@angular/localize": "13.3.12",
-    "@angular/material": "13.3.9",
-    "@angular/platform-browser": "13.3.12",
-    "@angular/platform-browser-dynamic": "13.3.12",
-    "@angular/router": "13.3.12",
+    "@angular-devkit/schematics": "^14.2.12",
+    "@angular-material-components/datetime-picker": "^8.0.0",
+    "@angular/animations": "^14.3.0",
+    "@angular/cdk": "14.2.7",
+    "@angular/common": "14.3.0",
+    "@angular/compiler": "14.3.0",
+    "@angular/core": "14.3.0",
+    "@angular/forms": "14.3.0",
+    "@angular/localize": "14.3.0",
+    "@angular/material": "14.2.7",
+    "@angular/platform-browser": "14.3.0",
+    "@angular/platform-browser-dynamic": "14.3.0",
+    "@angular/router": "14.3.0",
+    "@angular/flex-layout": "^14.0.0-beta.40",
     "@ckeditor/ckeditor5-angular": "1.2.3",
     "@ckeditor/ckeditor5-build-classic": "21.0.0",
     "@fortawesome/angular-fontawesome": "^0.10.2",
@@ -61,10 +61,10 @@
     "zone.js": "0.11.6"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "13.3.10",
-    "@angular/cli": "13.3.10",
-    "@angular/compiler-cli": "13.3.12",
-    "@angular/language-service": "13.3.12",
+    "@angular-devkit/build-angular": "14.2.12",
+    "@angular/cli": "14.2.12",
+    "@angular/compiler-cli": "14.3.0",
+    "@angular/language-service": "14.3.0",
     "@biesbjerg/ngx-translate-extract": "^7.0.4",
     "@cypress/schematic": "^1.7.0",
     "@ngx-rocket/scripts": "3.0.3",

src/app/account-transfers/create-standing-instructions/create-standing-instructions.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators, FormControl } from '@angular/forms';
 
 /** Custom Services */
 import { AccountTransfersService } from '../account-transfers.service';
@@ -27,7 +27,7 @@ export class CreateStandingInstructionsComponent implements OnInit {
   /** Allow Client Edit */
   allowclientedit = true;
   /** Edit Standing Instructions form. */
-  createStandingInstructionsForm: FormGroup;
+  createStandingInstructionsForm: UntypedFormGroup;
   /** Priority Type Data */
   priorityTypeData: any;
   /** Status Type Data */
@@ -72,7 +72,7 @@ export class CreateStandingInstructionsComponent implements OnInit {
    * @param {SettingsService} settingsService Settings Service
    * @param {Dates} dateUtils Date Utils
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private accountTransfersService: AccountTransfersService,

src/app/account-transfers/edit-standing-instructions/edit-standing-instructions.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators, FormControl } from '@angular/forms';
 
 /** Custom Services */
 import { AccountTransfersService } from '../account-transfers.service';
@@ -25,7 +25,7 @@ export class EditStandingInstructionsComponent implements OnInit {
   /** Allow Client Edit */
   allowclientedit = false;
   /** Edit Standing Instructions form. */
-  editStandingInstructionsForm: FormGroup;
+  editStandingInstructionsForm: UntypedFormGroup;
   /** Priority Type Data */
   priorityTypeData: any;
   /** Status Type Data */
@@ -50,7 +50,7 @@ export class EditStandingInstructionsComponent implements OnInit {
    * @param {SettingsService} settingsService Settings Service
    * @param {Dates} dateUtils Date Utils
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private accountTransfersService: AccountTransfersService,

src/app/account-transfers/list-standing-instructions/list-standing-instructions.component.ts

@@ -4,7 +4,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource, MatTable } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 
 /** Custom Services */
 import { AccountTransfersService } from '../account-transfers.service';
@@ -28,13 +28,13 @@ export class ListStandingInstructionsComponent implements OnInit {
   /** Instructions Data */
   instructionsData: any[];
   /** Name form control. */
-  transferType = new FormControl();
+  transferType = new UntypedFormControl();
   /** ExternalId form control. */
-  fromAccountId = new FormControl();
+  fromAccountId = new UntypedFormControl();
   /** Name form control. */
-  clientNameControl = new FormControl();
+  clientNameControl = new UntypedFormControl();
   /** ExternalId form control. */
-  fromClientId = new FormControl();
+  fromClientId = new UntypedFormControl();
   /** Client Name */
   clientName: any;
   /** Transfer Type Options Data */

src/app/account-transfers/make-account-transfers/make-account-transfers.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit, AfterViewInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 
 /** Custom Services */
 import { AccountTransfersService } from '../account-transfers.service';
@@ -27,7 +27,7 @@ export class MakeAccountTransfersComponent implements OnInit, AfterViewInit {
   /** Maximum date allowed. */
   maxDate = new Date(2100, 0, 1);
   /** Edit Standing Instructions form. */
-  makeAccountTransferForm: FormGroup;
+  makeAccountTransferForm: UntypedFormGroup;
   /** To Office Type Data */
   toOfficeTypeData: any;
   /** To Client Type Data */
@@ -55,7 +55,7 @@ export class MakeAccountTransfersComponent implements OnInit, AfterViewInit {
    * @param {SettingsService} settingsService Settings Service
    * @param {ClientsService} clientsService Clients Service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private accountTransfersService: AccountTransfersService,

src/app/accounting/accounting-rules/create-rule/create-rule.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
@@ -20,7 +20,7 @@ import { oneOfTheFieldsIsRequiredValidator } from '../one-of-the-fields-is-requi
 export class CreateRuleComponent implements OnInit {
 
   /** Accounting rule form. */
-  accountingRuleForm: FormGroup;
+  accountingRuleForm: UntypedFormGroup;
   /** Office data. */
   officeData: any;
   /** GL Account data. */
@@ -37,7 +37,7 @@ export class CreateRuleComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private accountingService: AccountingService,
               private route: ActivatedRoute,
               private router: Router) {

src/app/accounting/accounting-rules/edit-rule/edit-rule.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
@@ -20,7 +20,7 @@ import { oneOfTheFieldsIsRequiredValidator } from '../one-of-the-fields-is-requi
 export class EditRuleComponent implements OnInit {
 
   /** Accounting rule form. */
-  accountingRuleForm: FormGroup;
+  accountingRuleForm: UntypedFormGroup;
   /** Accounting rule. */
   accountingRule: any;
   /** Office data. */
@@ -39,7 +39,7 @@ export class EditRuleComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private accountingService: AccountingService,
               private route: ActivatedRoute,
               private router: Router) {

src/app/accounting/accounting-rules/one-of-the-fields-is-required.validator.ts

@@ -1,8 +1,8 @@
 /** Angular Imports */
-import { FormGroup, ValidatorFn, ValidationErrors } from '@angular/forms';
+import { UntypedFormGroup, ValidatorFn, ValidationErrors } from '@angular/forms';
 
 /** Validates that one of the fields for debit or credit is filled for a given accounting rule type. */
-export const oneOfTheFieldsIsRequiredValidator: ValidatorFn = (accountingRuleForm: FormGroup): ValidationErrors | null => {
+export const oneOfTheFieldsIsRequiredValidator: ValidatorFn = (accountingRuleForm: UntypedFormGroup): ValidationErrors | null => {
   const accountToDebit = accountingRuleForm.controls.accountToDebit.value;
   const debitTags = accountingRuleForm.controls.debitTags.value;
   const accountToCredit = accountingRuleForm.controls.accountToCredit.value;

src/app/accounting/chart-of-accounts/chart-of-accounts.component.ts

@@ -5,7 +5,7 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatTreeNestedDataSource } from '@angular/material/tree';
 import { NestedTreeControl } from '@angular/cdk/tree';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** rxjs Imports */
@@ -30,7 +30,7 @@ import { ConfigurationWizardService } from '../../configuration-wizard/configura
 export class ChartOfAccountsComponent implements AfterViewInit, OnInit {
 
   /** Button toggle group form control for type of view. (list/tree) */
-  viewGroup = new FormControl('listView');
+  viewGroup = new UntypedFormControl('listView');
   /** GL Account data. */
   glAccountData: any;
   /** Columns to be displayed in chart of accounts table. */

src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -23,7 +23,7 @@ import { ContinueSetupDialogComponent } from '../../../configuration-wizard/cont
 export class CreateGlAccountComponent implements OnInit, AfterViewInit {
 
   /** GL account form. */
-  glAccountForm: FormGroup;
+  glAccountForm: UntypedFormGroup;
   /** Chart of accounts data. */
   chartOfAccountsData: any;
   /** Account type data. */
@@ -56,7 +56,7 @@ export class CreateGlAccountComponent implements OnInit, AfterViewInit {
    * @param {PopoverService} popoverService PopoverService.
    * @param {Matdialog} dialog Matdialog.
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private accountingService: AccountingService,
               private route: ActivatedRoute,
               private router: Router,

src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';
@@ -17,7 +17,7 @@ import { AccountingService } from '../../accounting.service';
 export class EditGlAccountComponent implements OnInit {
 
   /** GL account form. */
-  glAccountForm: FormGroup;
+  glAccountForm: UntypedFormGroup;
   /** GL account and chart of accounts data. */
   glAccount: any;
   /** Account type data. */
@@ -36,7 +36,7 @@ export class EditGlAccountComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private accountingService: AccountingService,
               private route: ActivatedRoute,
               private router: Router) {

src/app/accounting/closing-entries/closing-entries.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit }
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** rxjs Imports */
@@ -28,7 +28,7 @@ export class ClosingEntriesComponent implements OnInit, AfterViewInit {
   /** Data source for closing entries table. */
   dataSource: MatTableDataSource<any>;
   /** Office name filter form control. */
-  officeName = new FormControl();
+  officeName = new UntypedFormControl();
   /** Office data. */
   officeData: any;
   /** Filtered office data for autocomplete. */

src/app/accounting/closing-entries/create-closure/create-closure.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
@@ -22,7 +22,7 @@ export class CreateClosureComponent implements OnInit {
   /** Maximum closing date allowed. */
   maxDate = new Date();
   /** Accounting closure form. */
-  accountingClosureForm: FormGroup;
+  accountingClosureForm: UntypedFormGroup;
   /** Office data. */
   officeData: any;
 
@@ -34,7 +34,7 @@ export class CreateClosureComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private accountingService: AccountingService,
     private settingsService: SettingsService,
     private dateUtils: Dates,

src/app/accounting/closing-entries/edit-closure/edit-closure.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
@@ -17,7 +17,7 @@ import { AccountingService } from '../../accounting.service';
 export class EditClosureComponent implements OnInit {
 
   /** Accounting closure form. */
-  accountingClosureForm: FormGroup;
+  accountingClosureForm: UntypedFormGroup;
   /** GL Account closure. */
   glAccountClosure: any;
   /** Office data. */
@@ -30,7 +30,7 @@ export class EditClosureComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private accountingService: AccountingService,
               private route: ActivatedRoute,
               private router: Router) {

src/app/accounting/create-journal-entry/create-journal-entry.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormArray } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -28,7 +28,7 @@ export class CreateJournalEntryComponent implements OnInit, AfterViewInit {
   /** Maximum transaction date allowed. */
   maxDate = new Date();
   /** Journal entry form. */
-  journalEntryForm: FormGroup;
+  journalEntryForm: UntypedFormGroup;
   /** Office data. */
   officeData: any;
   /** Currency data. */
@@ -53,7 +53,7 @@ export class CreateJournalEntryComponent implements OnInit, AfterViewInit {
    * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
    * @param {PopoverService} popoverService PopoverService.
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private accountingService: AccountingService,
     private settingsService: SettingsService,
     private dateUtils: Dates,
@@ -108,7 +108,7 @@ export class CreateJournalEntryComponent implements OnInit, AfterViewInit {
    * Creates the affected gl entry form.
    * @returns {FormGroup} Affected gl entry form.
    */
-  createAffectedGLEntryForm(): FormGroup {
+  createAffectedGLEntryForm(): UntypedFormGroup {
     return this.formBuilder.group({
       'glAccountId': ['', Validators.required],
       'amount': ['', Validators.required]
@@ -119,23 +119,23 @@ export class CreateJournalEntryComponent implements OnInit, AfterViewInit {
    * Gets the affected gl entry (debits) form array.
    * @returns {FormArray} Debits form array.
    */
-  get debits(): FormArray {
-    return this.journalEntryForm.get('debits') as FormArray;
+  get debits(): UntypedFormArray {
+    return this.journalEntryForm.get('debits') as UntypedFormArray;
   }
 
   /**
    * Gets the affected gl entry (credits) form array.
    * @returns {FormArray} Credits form array.
    */
-  get credits(): FormArray {
-    return this.journalEntryForm.get('credits') as FormArray;
+  get credits(): UntypedFormArray {
+    return this.journalEntryForm.get('credits') as UntypedFormArray;
   }
 
   /**
    * Adds the affected gl entry form to given affected gl entry form array.
    * @param {FormArray} affectedGLEntryFormArray Given affected gl entry form array (debit/credit).
    */
-  addAffectedGLEntry(affectedGLEntryFormArray: FormArray) {
+  addAffectedGLEntry(affectedGLEntryFormArray: UntypedFormArray) {
     affectedGLEntryFormArray.push(this.createAffectedGLEntryForm());
   }
 
@@ -144,7 +144,7 @@ export class CreateJournalEntryComponent implements OnInit, AfterViewInit {
    * @param {FormArray} affectedGLEntryFormArray Given affected gl entry form array (debit/credit).
    * @param {number} index Array index from where affected gl entry form needs to be removed.
    */
-  removeAffectedGLEntry(affectedGLEntryFormArray: FormArray, index: number) {
+  removeAffectedGLEntry(affectedGLEntryFormArray: UntypedFormArray, index: number) {
     affectedGLEntryFormArray.removeAt(index);
   }
 

src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/create-financial-activity-mapping.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
@@ -17,7 +17,7 @@ import { AccountingService } from '../../accounting.service';
 export class CreateFinancialActivityMappingComponent implements OnInit {
 
   /** Financial activity mapping form. */
-  financialActivityMappingForm: FormGroup;
+  financialActivityMappingForm: UntypedFormGroup;
   /** GL Account options. */
   glAccountOptions: any;
   /** GL Account data. */
@@ -32,7 +32,7 @@ export class CreateFinancialActivityMappingComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private accountingService: AccountingService,
               private route: ActivatedRoute,
               private router: Router) {

src/app/accounting/financial-activity-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
@@ -17,7 +17,7 @@ import { AccountingService } from '../../accounting.service';
 export class EditFinancialActivityMappingComponent implements OnInit {
 
   /** Financial activity mapping form. */
-  financialActivityMappingForm: FormGroup;
+  financialActivityMappingForm: UntypedFormGroup;
   /** GL Account options. */
   glAccountOptions: any;
   /** GL Account data. */
@@ -38,7 +38,7 @@ export class EditFinancialActivityMappingComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(private formBuider: FormBuilder,
+  constructor(private formBuider: UntypedFormBuilder,
               private accountingService: AccountingService,
               private route: ActivatedRoute,
               private router: Router) {

src/app/accounting/frequent-postings/frequent-postings.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormArray } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
@@ -22,7 +22,7 @@ export class FrequentPostingsComponent implements OnInit {
   /** Maximum transaction date allowed. */
   maxDate = new Date();
   /** Frequent postings form. */
-  frequentPostingsForm: FormGroup;
+  frequentPostingsForm: UntypedFormGroup;
   /** Office data. */
   officeData: any;
   /** Accounting rule data. */
@@ -48,7 +48,7 @@ export class FrequentPostingsComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private accountingService: AccountingService,
               private settingsService: SettingsService,
               private dateUtils: Dates,
@@ -122,7 +122,7 @@ export class FrequentPostingsComponent implements OnInit {
    * Creates the affected gl entry form.
    * @returns {FormGroup} Affected gl entry form.
    */
-  createAffectedGLEntryForm(): FormGroup {
+  createAffectedGLEntryForm(): UntypedFormGroup {
     return this.formBuilder.group({
       'glAccountId': ['', Validators.required],
       'amount': ['', Validators.required]
@@ -133,23 +133,23 @@ export class FrequentPostingsComponent implements OnInit {
    * Gets the affected gl entry (debits) form array.
    * @returns {FormArray} Debits form array.
    */
-  get debits(): FormArray {
-    return this.frequentPostingsForm.get('debits') as FormArray;
+  get debits(): UntypedFormArray {
+    return this.frequentPostingsForm.get('debits') as UntypedFormArray;
   }
 
   /**
    * Gets the affected gl entry (credits) form array.
    * @returns {FormArray} Credits form array.
    */
-  get credits(): FormArray {
-    return this.frequentPostingsForm.get('credits') as FormArray;
+  get credits(): UntypedFormArray {
+    return this.frequentPostingsForm.get('credits') as UntypedFormArray;
   }
 
   /**
    * Adds the affected gl entry form to given affected gl entry form array.
    * @param {FormArray} affectedGLEntryFormArray Given affected gl entry form array (debit/credit).
    */
-  addAffectedGLEntry(affectedGLEntryFormArray: FormArray) {
+  addAffectedGLEntry(affectedGLEntryFormArray: UntypedFormArray) {
     affectedGLEntryFormArray.push(this.createAffectedGLEntryForm());
   }
 
@@ -158,7 +158,7 @@ export class FrequentPostingsComponent implements OnInit {
    * @param {FormArray} affectedGLEntryFormArray Given affected gl entry form array (debit/credit).
    * @param {number} index Array index from where affected gl entry form needs to be removed.
    */
-  removeAffectedGLEntry(affectedGLEntryFormArray: FormArray, index: number) {
+  removeAffectedGLEntry(affectedGLEntryFormArray: UntypedFormArray, index: number) {
     affectedGLEntryFormArray.removeAt(index);
   }
 

src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormArray } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -28,7 +28,7 @@ export class MigrateOpeningBalancesComponent implements OnInit, AfterViewInit {
   /** Maximum opening balances date allowed. */
   maxDate = new Date();
   /** Opening balances form. */
-  openingBalancesForm: FormGroup;
+  openingBalancesForm: UntypedFormGroup;
   /** Opening balances data. */
   openingBalancesData: any;
   /** Office data. */
@@ -55,7 +55,7 @@ export class MigrateOpeningBalancesComponent implements OnInit, AfterViewInit {
    * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
    * @param {PopoverService} popoverService PopoverService.
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private accountingService: AccountingService,
     private settingsService: SettingsService,
     private dateUtils: Dates,
@@ -97,7 +97,7 @@ export class MigrateOpeningBalancesComponent implements OnInit, AfterViewInit {
    * @param glAccount GL Account for which form is returned.
    * @returns {FormGroup} GL Account entry form.
    */
-  createGLAccountEntryForm(glAccount: any): FormGroup {
+  createGLAccountEntryForm(glAccount: any): UntypedFormGroup {
     return this.formBuilder.group({
       'glAccountId': [glAccount.glAccountId],
       'debit': [null],
@@ -109,8 +109,8 @@ export class MigrateOpeningBalancesComponent implements OnInit, AfterViewInit {
    * Gets the gl account entries form array.
    * @returns {FormArray} GL Account entries form array.
    */
-  get glAccountEntries(): FormArray {
-    return this.openingBalancesForm.get('glAccountEntries') as FormArray;
+  get glAccountEntries(): UntypedFormArray {
+    return this.openingBalancesForm.get('glAccountEntries') as UntypedFormArray;
   }
 
   /**
@@ -119,7 +119,7 @@ export class MigrateOpeningBalancesComponent implements OnInit, AfterViewInit {
   retrieveOpeningBalances() {
     this.accountingService.retrieveOpeningBalances(this.openingBalancesForm.value.officeId)
       .subscribe((openingBalancesData: any) => {
-        const entry = this.openingBalancesForm.get('glAccountEntries') as FormArray;
+        const entry = this.openingBalancesForm.get('glAccountEntries') as UntypedFormArray;
 
         openingBalancesData.glAccounts = openingBalancesData.assetAccountOpeningBalances
           .concat(openingBalancesData.liabityAccountOpeningBalances,

src/app/accounting/migrate-opening-balances/only-one-of-the-fields-is-required.validator.ts

@@ -1,8 +1,8 @@
 /** Angular Imports */
-import { FormGroup, ValidatorFn, ValidationErrors } from '@angular/forms';
+import { UntypedFormGroup, ValidatorFn, ValidationErrors } from '@angular/forms';
 
 /** Validates that atleast one of the fields debit or credit is filled (but not both) for a given gl account. */
-export const onlyOneOfTheFieldsIsRequiredValidator: ValidatorFn = (glAccountEntriesForm: FormGroup): ValidationErrors | null => {
+export const onlyOneOfTheFieldsIsRequiredValidator: ValidatorFn = (glAccountEntriesForm: UntypedFormGroup): ValidationErrors | null => {
   const debit = glAccountEntriesForm.controls.debit.value;
   const credit = glAccountEntriesForm.controls.credit.value;
   return ((debit || credit) && !(debit && credit)) ? null : { 'error': true };

src/app/accounting/periodic-accruals/periodic-accruals.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
@@ -22,7 +22,7 @@ export class PeriodicAccrualsComponent implements OnInit {
   /** Maximum accrue date allowed. */
   maxDate = new Date();
   /** Periodic accruals form. */
-  periodicAccrualsForm: FormGroup;
+  periodicAccrualsForm: UntypedFormGroup;
 
   /**
    * @param {FormBuilder} formBuilder Form Builder.
@@ -31,7 +31,7 @@ export class PeriodicAccrualsComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private accountingService: AccountingService,
     private settingsService: SettingsService,
     private dateUtils: Dates,

src/app/accounting/provisioning-entries/create-provisioning-entry/create-provisioning-entry.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -22,7 +22,7 @@ export class CreateProvisioningEntryComponent implements OnInit {
   /** Maximum provisioning date allowed. */
   maxDate = new Date();
   /** Provisioning entry form. */
-  provisioningEntryForm: FormGroup;
+  provisioningEntryForm: UntypedFormGroup;
 
   /**
    * @param {FormBuilder} formBuilder Form Builder.
@@ -31,7 +31,7 @@ export class CreateProvisioningEntryComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private accountingService: AccountingService,
     private settingsService: SettingsService,
     private dateUtils: Dates,

src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
@@ -29,19 +29,19 @@ export class ViewProvisioningEntryComponent implements OnInit, AfterViewInit {
   /** Provisioning entry entries. */
   provisioningEntryEntries: any;
   /** Office name filter form control. */
-  officeName = new FormControl();
+  officeName = new UntypedFormControl();
   /** Office data. */
   officeData: any;
   /** Filtered office data for autocomplete. */
   filteredOfficeData: any;
   /** Loan product filter form control. */
-  loanProduct = new FormControl();
+  loanProduct = new UntypedFormControl();
   /** Loan product data. */
   loanProductData: any;
   /** Filtered loan product data for autocomplete. */
   filteredLoanProductData: any;
   /** Provisioning category filter form control. */
-  provisioningCategory = new FormControl();
+  provisioningCategory = new UntypedFormControl();
   /** Provisioning category data. */
   provisioningCategoryData: any;
   /** Filtered provisioning category data for autocomplete. */

src/app/accounting/revert-transaction/revert-transaction.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 
 /**
  * Revert transaction dialog component.
@@ -14,7 +14,7 @@ import { FormControl } from '@angular/forms';
 export class RevertTransactionComponent implements OnInit {
 
   /** Comments input form control. */
-  comments = new FormControl('');
+  comments = new UntypedFormControl('');
 
   /**
    * @param {MatDialogRef} dialogRef Component reference to dialog.

src/app/accounting/search-journal-entry/search-journal-entry.component.ts

@@ -2,7 +2,7 @@
 import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 
 /** rxjs Imports */
@@ -31,19 +31,19 @@ export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
   /** Maximum transaction date allowed. */
   maxDate = new Date();
   /** Office name filter form control.  */
-  officeName = new FormControl();
+  officeName = new UntypedFormControl();
   /** Office data. */
   officeData: any;
   /** Filtered office data for autocomplete. */
   filteredOfficeData: any;
   /** Gl Account filter form control. */
-  glAccount = new FormControl();
+  glAccount = new UntypedFormControl();
   /** Gl Account data. */
   glAccountData: any;
   /** Filtered gl account data. */
   filteredGLAccountData: any;
   /** Entry type filter form control. */
-  entryTypeFilter = new FormControl('');
+  entryTypeFilter = new UntypedFormControl('');
   /** Entry type filter data. */
   entryTypeFilterData = [
     {
@@ -60,15 +60,15 @@ export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
     }
   ];
   /** Transaction date from form control. */
-  transactionDateFrom = new FormControl(new Date(new Date().setMonth(new Date().getMonth() - 1)));
+  transactionDateFrom = new UntypedFormControl(new Date(new Date().setMonth(new Date().getMonth() - 1)));
   /** Transaction date to form control. */
-  transactionDateTo = new FormControl(new Date());
+  transactionDateTo = new UntypedFormControl(new Date());
   /** Transaction ID form control. */
-  transactionId = new FormControl();
+  transactionId = new UntypedFormControl();
   /** Submitted on date from form control. */
-  submittedOnDateFrom = new FormControl();
+  submittedOnDateFrom = new UntypedFormControl();
   /** Submitted on date to form control. */
-  submittedOnDateTo = new FormControl();
+  submittedOnDateTo = new UntypedFormControl();
   /** Columns to be displayed in journal entries table. */
   displayedColumns: string[] = ['id', 'officeName', 'transactionId', 'transactionDate', 'glAccountType', 'createdByUserName', 'submittedOnDate', 'glAccountCode', 'glAccountName', 'currency', 'debit', 'credit'];
   /** Data source for journal entries table. */

src/app/centers/centers-view/center-actions/activate-center/activate-center.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class ActivateCenterComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Activate center form. */
-  activateCenterForm: FormGroup;
+  activateCenterForm: UntypedFormGroup;
   /** Group Account Id */
   centerId: any;
 
@@ -35,7 +35,7 @@ export class ActivateCenterComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private centersService: CentersService,
               private settingsService: SettingsService,
               private dateUtils: Dates,

src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class AttachCenterMeetingComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Center Meeting form. */
-  centerMeetingForm: FormGroup;
+  centerMeetingForm: UntypedFormGroup;
   /** Calnedar Template Data */
   calendarTemplate: any;
   /** Center Id */
@@ -44,7 +44,7 @@ export class AttachCenterMeetingComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private centersService: CentersService,
               private settingsService: SettingsService,
               private dateUtils: Dates,
@@ -80,8 +80,8 @@ export class AttachCenterMeetingComponent implements OnInit {
   buildDependencies() {
     this.centerMeetingForm.get('repeating').valueChanges.subscribe((value: boolean) => {
       if (value) {
-        this.centerMeetingForm.addControl('frequency', new FormControl());
-        this.centerMeetingForm.addControl('interval', new FormControl());
+        this.centerMeetingForm.addControl('frequency', new UntypedFormControl());
+        this.centerMeetingForm.addControl('interval', new UntypedFormControl());
         this.centerMeetingForm.get('frequency').valueChanges.subscribe((frequency: any) => {
           this.centerMeetingForm.removeControl('repeatsOnDay');
           switch (frequency) {
@@ -90,7 +90,7 @@ export class AttachCenterMeetingComponent implements OnInit {
             break;
             case 2: // Weekly
               this.repetitionIntervals = ['1', '2', '3'];
-              this.centerMeetingForm.addControl('repeatsOnDay', new FormControl('', Validators.required));
+              this.centerMeetingForm.addControl('repeatsOnDay', new UntypedFormControl('', Validators.required));
             break;
             case 3: // Monthly
               this.repetitionIntervals = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'];

src/app/centers/centers-view/center-actions/center-assign-staff/center-assign-staff.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -17,7 +17,7 @@ import { CentersService } from 'app/centers/centers.service';
 export class CenterAssignStaffComponent implements OnInit {
 
   /** Center Assign Staff form. */
-  centerAssignStaffForm: FormGroup;
+  centerAssignStaffForm: UntypedFormGroup;
   /** Field Officer Data */
   staffData: any;
   /** Center Data */
@@ -30,7 +30,7 @@ export class CenterAssignStaffComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private centersService: CentersService,
               private route: ActivatedRoute,
               private router: Router) {

src/app/centers/centers-view/center-actions/center-attendance/center-attendance.component.ts

@@ -2,7 +2,7 @@
 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 
 /** Custom Services */
 import { CentersService } from 'app/centers/centers.service';
@@ -35,7 +35,7 @@ export class CenterAttendanceComponent implements OnInit {
   /** Columns to be displayed in member's attendance table. */
   displayedColumns: string[] = ['name', 'attendance'];
   /** Start Date Form Control */
-  meetingDate = new FormControl();
+  meetingDate = new UntypedFormControl();
   /** Meeting Dates Data */
   meetingDates: any[];
   /** Data source for client members table. */

src/app/centers/centers-view/center-actions/close-center/close-center.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class CloseCenterComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Close Share Account form. */
-  closeCenterForm: FormGroup;
+  closeCenterForm: UntypedFormGroup;
   /** Center Data */
   closureData: any;
   /** Center Id */
@@ -37,7 +37,7 @@ export class CloseCenterComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private centersService: CentersService,
               private settingsService: SettingsService,
               private dateUtils: Dates,

src/app/centers/centers-view/center-actions/edit-center-meeting-schedule/edit-center-meeting-schedule.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, FormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class EditCenterMeetingScheduleComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Center Meeting form. */
-  centerEditMeetingScheduleForm: FormGroup;
+  centerEditMeetingScheduleForm: UntypedFormGroup;
   /** Calendar Template Data */
   calendarTemplate: any;
   /** Center Id */
@@ -42,7 +42,7 @@ export class EditCenterMeetingScheduleComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private centersService: CentersService,
               private settingsService: SettingsService,
               private dateUtils: Dates,

src/app/centers/centers-view/center-actions/edit-center-meeting/edit-center-meeting.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class EditCenterMeetingComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Center Meeting form. */
-  centerEditMeetingForm: FormGroup;
+  centerEditMeetingForm: UntypedFormGroup;
   /** Calendar Template Data */
   calendarTemplate: any;
   /** Center Id */
@@ -46,7 +46,7 @@ export class EditCenterMeetingComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private centersService: CentersService,
               private settingsService: SettingsService,
               private dateUtils: Dates,
@@ -90,7 +90,7 @@ export class EditCenterMeetingComponent implements OnInit {
         break;
         case 2: // Weekly
           this.repetitionIntervals = ['1', '2', '3'];
-          this.centerEditMeetingForm.addControl('repeatsOnDay', new FormControl('', Validators.required));
+          this.centerEditMeetingForm.addControl('repeatsOnDay', new UntypedFormControl('', Validators.required));
           this.centerEditMeetingForm.get('repeatsOnDay').patchValue(this.calendarTemplate.repeatsOnDay.id);
         break;
         case 3: // Monthly

src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, AfterViewInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 
 /** Custom Dialogs */
@@ -26,7 +26,7 @@ export class ManageGroupsComponent implements AfterViewInit {
   /** Group Members. */
   groupMembers: any[] = [];
   /** GroupChoice. */
-  groupChoice = new FormControl('');
+  groupChoice = new UntypedFormControl('');
 
   /**
    * Fetches center action data from `resolve`

src/app/centers/centers-view/notes-tab/notes-tab.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 
 /** Custom Components */
 import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
@@ -20,12 +20,12 @@ export class NotesTabComponent implements OnInit {
   centerId: string;
   username: string;
   centerNotes: any;
-  noteForm: FormGroup;
+  noteForm: UntypedFormGroup;
   @ViewChild('formRef', { static: true }) formRef: any;
 
 
   constructor(private route: ActivatedRoute,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private centersService: CentersService,
     private authenticationService: AuthenticationService,
     private dialog: MatDialog) {

src/app/centers/centers.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** rxjs Imports */
@@ -28,9 +28,9 @@ export class CentersComponent implements OnInit, AfterViewInit {
   @ViewChild('showClosedCenters', { static: true }) showClosedCenters: MatCheckbox;
 
   /** Name form control. */
-  name = new FormControl();
+  name = new UntypedFormControl();
   /** ExternalId form control. */
-  externalId = new FormControl();
+  externalId = new UntypedFormControl();
   /** Columns to be displayed in centers table. */
   displayedColumns =  ['name', 'accountNo', 'externalId', 'status', 'officeName'];
   /** Data source for centers table. */

src/app/centers/create-center/create-center.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, UntypedFormControl, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
@@ -24,7 +24,7 @@ export class CreateCenterComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Center form. */
-  centerForm: FormGroup;
+  centerForm: UntypedFormGroup;
   /** Office data. */
   officeData: any;
   /** Group data. */
@@ -34,7 +34,7 @@ export class CreateCenterComponent implements OnInit {
   /** Group Members. */
   groupMembers: any[] = [];
   /** Group Choice. */
-  groupChoice = new FormControl('');
+  groupChoice = new UntypedFormControl('');
 
   /**
    * Retrieves the offices data from `resolve`.
@@ -46,7 +46,7 @@ export class CreateCenterComponent implements OnInit {
    * @param {GroupsService} groupService GroupsService.
    * @param {Dates} dateUtils Date Utils to format date.
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private centerService: CentersService,
@@ -106,7 +106,7 @@ export class CreateCenterComponent implements OnInit {
     });
     this.centerForm.get('active').valueChanges.subscribe((bool: boolean) => {
       if (bool) {
-        this.centerForm.addControl('activationDate', new FormControl('', Validators.required));
+        this.centerForm.addControl('activationDate', new UntypedFormControl('', Validators.required));
       } else {
         this.centerForm.removeControl('activationDate');
       }

src/app/centers/edit-center/edit-center.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, UntypedFormControl, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
@@ -27,7 +27,7 @@ export class EditCenterComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Activate center form. */
-  editCenterForm: FormGroup;
+  editCenterForm: UntypedFormGroup;
 
   /**
    * Retrieves the center and template data from `resolve`.
@@ -38,7 +38,7 @@ export class EditCenterComponent implements OnInit {
    * @param {GroupsService} groupService GroupsService.
    * @param {Dates} dateUtils Date Utils to format date.
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private centersService: CentersService,
@@ -69,7 +69,7 @@ export class EditCenterComponent implements OnInit {
       'externalId': [this.centerData.externalId]
     });
     if (this.centerData.status.value === 'Pending') {
-      this.editCenterForm.addControl('activationDate', new FormControl(this.centerData.activationDate ? this.centerData.activationDate : new Date(), Validators.required));
+      this.editCenterForm.addControl('activationDate', new UntypedFormControl(this.centerData.activationDate ? this.centerData.activationDate : new Date(), Validators.required));
     }
   }
 

src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { Datatables } from 'app/core/utils/datatables';
 import { SettingsService } from 'app/settings/settings.service';
 
@@ -12,11 +12,11 @@ export class ClientDatatableStepComponent implements OnInit {
   /** Input Fields Data */
   @Input() datatableData: any;
   /** Create Input Form */
-  datatableForm: FormGroup;
+  datatableForm: UntypedFormGroup;
 
   datatableInputs: any = [];
 
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private settingsService: SettingsService,
     private datatableService: Datatables) { }
 
@@ -27,12 +27,12 @@ export class ClientDatatableStepComponent implements OnInit {
       input.controlName = this.getInputName(input);
       if (!input.isColumnNullable) {
         if (this.isNumeric(input.columnDisplayType)) {
-          inputItems[input.controlName] = new FormControl(0, [Validators.required]);
+          inputItems[input.controlName] = new UntypedFormControl(0, [Validators.required]);
         } else {
-          inputItems[input.controlName] = new FormControl('', [Validators.required]);
+          inputItems[input.controlName] = new UntypedFormControl('', [Validators.required]);
         }
       } else {
-        inputItems[input.controlName] = new FormControl('');
+        inputItems[input.controlName] = new UntypedFormControl('');
       }
     });
     this.datatableForm = this.formBuilder.group(inputItems);

src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 
 /** Custom Services */
 import { SettingsService } from 'app/settings/settings.service';
@@ -21,7 +21,7 @@ export class ClientFamilyMemberDialogComponent implements OnInit {
   maxDate = new Date();
 
   /** Add/Edit family member form. */
-  familyMemberForm: FormGroup;
+  familyMemberForm: UntypedFormGroup;
 
   /**
    * @param {MatDialogRef} dialogRef Client Family Member Dialog Reference
@@ -31,7 +31,7 @@ export class ClientFamilyMemberDialogComponent implements OnInit {
    * @param {SettingsService} settingsService Setting service
    */
   constructor(public dialogRef: MatDialogRef<ClientFamilyMemberDialogComponent>,
-              private formBuilder: FormBuilder,
+              private formBuilder: UntypedFormBuilder,
               private dateUtils: Dates,
               @Inject(MAT_DIALOG_DATA) public data: any,
               private settingsService: SettingsService) { }

src/app/clients/client-stepper/client-general-step/client-general-step.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators, UntypedFormControl } from '@angular/forms';
 import { ClientsService } from 'app/clients/clients.service';
 import { Dates } from 'app/core/utils/dates';
 
@@ -27,7 +27,7 @@ export class ClientGeneralStepComponent implements OnInit {
   /** Client Template */
   @Input() clientTemplate: any;
   /** Create Client Form */
-  createClientForm: FormGroup;
+  createClientForm: UntypedFormGroup;
 
   /** Office Options */
   officeOptions: any;
@@ -54,7 +54,7 @@ export class ClientGeneralStepComponent implements OnInit {
    * @param {SettingsService} settingsService Setting service
    * @param {ClientsService} clientService Client service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private dateUtils: Dates,
               private settingsService: SettingsService,
               private clientService: ClientsService) {
@@ -114,14 +114,14 @@ export class ClientGeneralStepComponent implements OnInit {
       if (legalFormId === 1) {
         this.createClientForm.removeControl('fullname');
         this.createClientForm.removeControl('clientNonPersonDetails');
-        this.createClientForm.addControl('firstname', new FormControl('', [Validators.required, Validators.pattern('(^[A-z]).*')]));
-        this.createClientForm.addControl('middlename', new FormControl('', Validators.pattern('(^[A-z]).*')));
-        this.createClientForm.addControl('lastname', new FormControl('', [Validators.required, Validators.pattern('(^[A-z]).*')]));
+        this.createClientForm.addControl('firstname', new UntypedFormControl('', [Validators.required, Validators.pattern('(^[A-z]).*')]));
+        this.createClientForm.addControl('middlename', new UntypedFormControl('', Validators.pattern('(^[A-z]).*')));
+        this.createClientForm.addControl('lastname', new UntypedFormControl('', [Validators.required, Validators.pattern('(^[A-z]).*')]));
       } else {
         this.createClientForm.removeControl('firstname');
         this.createClientForm.removeControl('middlename');
         this.createClientForm.removeControl('lastname');
-        this.createClientForm.addControl('fullname', new FormControl('', [Validators.required, Validators.pattern('(^[A-z]).*')]));
+        this.createClientForm.addControl('fullname', new UntypedFormControl('', [Validators.required, Validators.pattern('(^[A-z]).*')]));
         this.createClientForm.addControl('clientNonPersonDetails', this.formBuilder.group({
           'constitutionId': ['', Validators.required],
           'incorpValidityTillDate': [''],
@@ -134,14 +134,14 @@ export class ClientGeneralStepComponent implements OnInit {
     this.createClientForm.get('legalFormId').patchValue(1);
     this.createClientForm.get('active').valueChanges.subscribe((active: boolean) => {
       if (active) {
-        this.createClientForm.addControl('activationDate', new FormControl('', Validators.required));
+        this.createClientForm.addControl('activationDate', new UntypedFormControl('', Validators.required));
       } else {
         this.createClientForm.removeControl('activationDate');
       }
     });
     this.createClientForm.get('addSavings').valueChanges.subscribe((active: boolean) => {
       if (active) {
-        this.createClientForm.addControl('savingsProductId', new FormControl('', Validators.required));
+        this.createClientForm.addControl('savingsProductId', new UntypedFormControl('', Validators.required));
       } else {
         this.createClientForm.removeControl('savingsProductId');
       }

src/app/clients/clients-routing.module.ts

@@ -1,4 +1,4 @@
-import { NgModule, Component } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 /** Routing Imports */

src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services. */
@@ -35,7 +35,7 @@ export class ClientPayChargesComponent implements OnInit {
      */
   constructor(
     private clientsService: ClientsService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private dateUtils: Dates,

src/app/clients/clients-view/client-actions/accept-client-transfer/accept-client-transfer.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -19,7 +19,7 @@ import { SettingsService } from 'app/settings/settings.service';
 export class AcceptClientTransferComponent implements OnInit {
 
   /** Accept Client Transfer form. */
-  acceptClientTransferForm: FormGroup;
+  acceptClientTransferForm: UntypedFormGroup;
   /** Client Id */
   clientId: any;
   /** Transfer Date */
@@ -33,7 +33,7 @@ export class AcceptClientTransferComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private clientsService: ClientsService,
               private settingsService: SettingsService,
               private dateUtils: Dates,

src/app/clients/clients-view/client-actions/activate-client/activate-client.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class ActivateClientComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Activate client form. */
-  activateClientForm: FormGroup;
+  activateClientForm: UntypedFormGroup;
   /** Client Id */
   clientId: any;
 
@@ -35,7 +35,7 @@ export class ActivateClientComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private clientsService: ClientsService,
               private dateUtils: Dates,
               private route: ActivatedRoute,

src/app/clients/clients-view/client-actions/add-client-charge/add-client-charge.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class AddClientChargeComponent implements OnInit {
   /** Maximum Due Date allowed. */
   maxDate = new Date();
   /** Add Clients Charge form. */
-  clientChargeForm: FormGroup;
+  clientChargeForm: UntypedFormGroup;
   /** clients charge options. */
   clientChargeOptions: any;
   /** clients Id */
@@ -41,7 +41,7 @@ export class AddClientChargeComponent implements OnInit {
    * @param {SettingsService} settingsService Setting service
    */
   constructor(
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private dateUtils: Dates,
@@ -75,17 +75,17 @@ export class AddClientChargeComponent implements OnInit {
           this.chargeDetails.chargeTimeTypeAnnualOrMonth = true;
         }
         if (!this.chargeDetails.dueDateNotRequired && !this.chargeDetails.chargeTimeTypeAnnualOrMonth) {
-          this.clientChargeForm.addControl('dueDate', new FormControl('', Validators.required));
+          this.clientChargeForm.addControl('dueDate', new UntypedFormControl('', Validators.required));
         } else {
           this.clientChargeForm.removeControl('dueDate');
         }
         if (!this.chargeDetails.dueDateNotRequired && this.chargeDetails.chargeTimeTypeAnnualOrMonth) {
-          this.clientChargeForm.addControl('feeOnMonthDay', new FormControl('', Validators.required));
+          this.clientChargeForm.addControl('feeOnMonthDay', new UntypedFormControl('', Validators.required));
         } else {
           this.clientChargeForm.removeControl('feeOnMonthDay');
         }
         if (chargeTimeType.value === 'Monthly Fee') {
-          this.clientChargeForm.addControl('feeInterval', new FormControl(data.feeInterval, Validators.required));
+          this.clientChargeForm.addControl('feeInterval', new UntypedFormControl(data.feeInterval, Validators.required));
         } else {
           this.clientChargeForm.removeControl('feeInterval');
         }

src/app/clients/clients-view/client-actions/add-client-collateral/add-client-collateral.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /**
@@ -18,7 +18,7 @@ import { SettingsService } from 'app/settings/settings.service';
 export class AddClientCollateralComponent implements OnInit {
 
   /** Client Collateral Form */
-  clientCollateralForm: FormGroup;
+  clientCollateralForm: UntypedFormGroup;
   /** Client Collateral Options */
   clientCollateralOptions: any;
   /** Client Id */
@@ -34,7 +34,7 @@ export class AddClientCollateralComponent implements OnInit {
    * @param {ProductsService} productsService Products Service
    */
   constructor(
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private productsService: ProductsService,

src/app/clients/clients-view/client-actions/client-assign-staff/client-assign-staff.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -17,7 +17,7 @@ import { ClientsService } from 'app/clients/clients.service';
 export class ClientAssignStaffComponent implements OnInit {
 
   /** Client Assign Staff form. */
-  clientAssignStaffForm: FormGroup;
+  clientAssignStaffForm: UntypedFormGroup;
   /** Staff Data */
   staffData: any;
   /** Client Data */
@@ -30,7 +30,7 @@ export class ClientAssignStaffComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private clientsService: ClientsService,
               private route: ActivatedRoute,
               private router: Router) {

src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, Renderer2, ViewChild, ElementRef, SecurityContext } from '@angular/core';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -18,7 +18,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 export class ClientScreenReportsComponent implements OnInit {
 
   /** Client Screen Reportform. */
-  clientScreenReportForm: FormGroup;
+  clientScreenReportForm: UntypedFormGroup;
   /** Templates Data */
   templatesData: any;
   /** Client Id */
@@ -37,7 +37,7 @@ export class ClientScreenReportsComponent implements OnInit {
    * @param {DomSanitizer} sanitizer DOM Sanitizer
    * @param {Renderer2} renderer Renderer 2
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private clientsService: ClientsService,
               private route: ActivatedRoute,
               private sanitizer: DomSanitizer,

src/app/clients/clients-view/client-actions/close-client/close-client.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class CloseClientComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Close Client form. */
-  closeClientForm: FormGroup;
+  closeClientForm: UntypedFormGroup;
   /** Client Data */
   closureData: any;
   /** Client Id */
@@ -37,7 +37,7 @@ export class CloseClientComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Setting service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private clientsService: ClientsService,
               private dateUtils: Dates,
               private route: ActivatedRoute,

src/app/clients/clients-view/client-actions/create-self-service-user/create-self-service-user.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports. */
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, FormControl, Validators, AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, UntypedFormControl, Validators, AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 
@@ -14,11 +14,11 @@ import { ClientsService } from 'app/clients/clients.service';
 })
 export class CreateSelfServiceUserComponent implements OnInit {
 
-  createSelfServiceForm: FormGroup;
+  createSelfServiceForm: UntypedFormGroup;
   clientData: any;
   hidePasswordField = true;
 
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private route: ActivatedRoute,
               private clientService: ClientsService,
               private router: Router) {
@@ -43,8 +43,8 @@ export class CreateSelfServiceUserComponent implements OnInit {
         this.createSelfServiceForm.removeControl('repeatPassword');
       } else {
         this.hidePasswordField = false;
-        this.createSelfServiceForm.addControl('password', new FormControl('', [Validators.required]));
-        this.createSelfServiceForm.addControl('repeatPassword', new FormControl('', [Validators.required, this.confirmPassword('password')]));
+        this.createSelfServiceForm.addControl('password', new UntypedFormControl('', [Validators.required]));
+        this.createSelfServiceForm.addControl('repeatPassword', new UntypedFormControl('', [Validators.required, this.confirmPassword('password')]));
       }
     });
   }
@@ -54,13 +54,13 @@ export class CreateSelfServiceUserComponent implements OnInit {
    */
   createSelfServiceUser() {
     this.createSelfServiceForm = this.formBuilder.group({
-      'username': new FormControl('', [Validators.required]),
-      'firstname': new FormControl(this.clientData.firstname, [Validators.required]),
-      'lastname': new FormControl(this.clientData.lastname, [Validators.required]),
-      'email': new FormControl('', [Validators.required, Validators.email]),
-      'sendPasswordToEmail': new FormControl(true),
-      'passwordNeverExpires': new FormControl(false),
-      'status': new FormControl({value: this.clientData.subStatus.active ? 'Active' : 'Inactive', disabled: true})
+      'username': new UntypedFormControl('', [Validators.required]),
+      'firstname': new UntypedFormControl(this.clientData.firstname, [Validators.required]),
+      'lastname': new UntypedFormControl(this.clientData.lastname, [Validators.required]),
+      'email': new UntypedFormControl('', [Validators.required, Validators.email]),
+      'sendPasswordToEmail': new UntypedFormControl(true),
+      'passwordNeverExpires': new UntypedFormControl(false),
+      'status': new UntypedFormControl({value: this.clientData.subStatus.active ? 'Active' : 'Inactive', disabled: true})
     });
   }
 

src/app/clients/clients-view/client-actions/reactivate-client/reactivate-client.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class ReactivateClientComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Reactivate client form. */
-  reactivateClientForm: FormGroup;
+  reactivateClientForm: UntypedFormGroup;
   /** Client Account Id */
   clientId: any;
 
@@ -35,7 +35,7 @@ export class ReactivateClientComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Setting service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private clientsService: ClientsService,
               private dateUtils: Dates,
               private route: ActivatedRoute,

src/app/clients/clients-view/client-actions/reject-client-transfer/reject-client-transfer.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -19,7 +19,7 @@ import { SettingsService } from 'app/settings/settings.service';
 export class RejectClientTransferComponent implements OnInit {
 
   /** Reject Client Transfer form. */
-  rejectClientTransferForm: FormGroup;
+  rejectClientTransferForm: UntypedFormGroup;
   /** Client Id */
   clientId: any;
   /** Transfer Date */
@@ -31,7 +31,7 @@ export class RejectClientTransferComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private clientsService: ClientsService,
               private settingsService: SettingsService,
               private dateUtils: Dates,

src/app/clients/clients-view/client-actions/reject-client/reject-client.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class RejectClientComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Reject Share Account form. */
-  rejectClientForm: FormGroup;
+  rejectClientForm: UntypedFormGroup;
   /** Client Data */
   rejectionData: any;
   /** Client Id */
@@ -37,7 +37,7 @@ export class RejectClientComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Setting service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private clientsService: ClientsService,
               private dateUtils: Dates,
               private route: ActivatedRoute,

src/app/clients/clients-view/client-actions/transfer-client/transfer-client.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class TransferClientComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Transfer Client form. */
-  transferClientForm: FormGroup;
+  transferClientForm: UntypedFormGroup;
   /** Client Data */
   officeData: any;
   /** Client Id */
@@ -37,7 +37,7 @@ export class TransferClientComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Setting service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private clientsService: ClientsService,
               private dateUtils: Dates,
               private route: ActivatedRoute,

src/app/clients/clients-view/client-actions/undo-client-rejection/undo-client-rejection.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class UndoClientRejectionComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Undo Client Rejection form. */
-  undoClientRejectionForm: FormGroup;
+  undoClientRejectionForm: UntypedFormGroup;
   /** Client Id */
   clientId: any;
 
@@ -34,7 +34,7 @@ export class UndoClientRejectionComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private clientsService: ClientsService,
               private dateUtils: Dates,
               private route: ActivatedRoute,

src/app/clients/clients-view/client-actions/undo-client-transfer/undo-client-transfer.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -19,7 +19,7 @@ import { SettingsService } from 'app/settings/settings.service';
 export class UndoClientTransferComponent implements OnInit {
 
   /** Undo Client Transfer form. */
-  undoClientTransferForm: FormGroup;
+  undoClientTransferForm: UntypedFormGroup;
   /** Client Id */
   clientId: any;
   /** Transfer Date */
@@ -31,7 +31,7 @@ export class UndoClientTransferComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private clientsService: ClientsService,
               private settingsService: SettingsService,
               private dateUtils: Dates,

src/app/clients/clients-view/client-actions/update-client-savings-account/update-client-savings-account.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -17,7 +17,7 @@ import { ClientsService } from 'app/clients/clients.service';
 export class UpdateClientSavingsAccountComponent implements OnInit {
 
   /** Client Update Savings Account form. */
-  clientSavingsAccountForm: FormGroup;
+  clientSavingsAccountForm: UntypedFormGroup;
   /** Savings Accounts Data */
   savingsAccounts: any;
   /** Client Data */
@@ -30,7 +30,7 @@ export class UpdateClientSavingsAccountComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private clientsService: ClientsService,
               private route: ActivatedRoute,
               private router: Router) {

src/app/clients/clients-view/client-actions/withdraw-client/withdraw-client.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class WithdrawClientComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Withdraw Client form. */
-  withdrawClientForm: FormGroup;
+  withdrawClientForm: UntypedFormGroup;
   /** Client Data */
   withdrawalData: any;
   /** Client Id */
@@ -37,7 +37,7 @@ export class WithdrawClientComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Setting service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private clientsService: ClientsService,
               private dateUtils: Dates,
               private route: ActivatedRoute,

src/app/clients/clients-view/custom-dialogs/edit-notes-dialog/edit-notes-dialog.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 
 @Component({
   selector: 'mifosx-edit-notes-dialog',
@@ -9,10 +9,10 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
   styleUrls: ['./edit-notes-dialog.component.scss']
 })
 export class EditNotesDialogComponent implements OnInit {
-  noteForm: FormGroup;
+  noteForm: UntypedFormGroup;
 
   constructor(public dialogRef: MatDialogRef<EditNotesDialogComponent>,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     @Inject(MAT_DIALOG_DATA) public data: any) { }
 
   ngOnInit() {

src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, FormControl } from '@angular/forms';
 
 @Component({
   selector: 'mifosx-upload-document-dialog',
@@ -10,7 +10,7 @@ import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms'
 export class UploadDocumentDialogComponent implements OnInit {
 
   /** Upload Document form. */
-  uploadDocumentForm: FormGroup;
+  uploadDocumentForm: UntypedFormGroup;
   /** Upload Document Data */
   uploadDocumentData: any = [];
   /** Triggers description field */
@@ -24,7 +24,7 @@ export class UploadDocumentDialogComponent implements OnInit {
    * @param {any} data Dialog Data
    */
   constructor(public dialogRef: MatDialogRef<UploadDocumentDialogComponent>,
-              private formBuilder: FormBuilder,
+              private formBuilder: UntypedFormBuilder,
               @Inject(MAT_DIALOG_DATA) public data: any) {
     this.documentIdentifier = data.documentIdentifier;
     this.entityType = data.entityType;

src/app/clients/clients-view/family-members-tab/add-family-member/add-family-member.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class AddFamilyMemberComponent implements OnInit {
   /** Minimum age allowed is 0. */
   minAge = 0;
   /** Add family member form. */
-  addFamilyMemberForm: FormGroup;
+  addFamilyMemberForm: UntypedFormGroup;
   /** Add family member template. */
   addFamilyMemberTemplate: any;
   /** Client ID */
@@ -37,7 +37,7 @@ export class AddFamilyMemberComponent implements OnInit {
    * @param {ClientsService} clientsService Clients Service
    * @param {SettingsService} settingsService Setting service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private dateUtils: Dates,
               private router: Router,
               private route: ActivatedRoute,

src/app/clients/clients-view/family-members-tab/edit-family-member/edit-family-member.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
@@ -22,7 +22,7 @@ export class EditFamilyMemberComponent implements OnInit {
   /** Maximum Due Date allowed. */
   maxDate = new Date();
   /** Add family member form. */
-  editFamilyMemberForm: FormGroup;
+  editFamilyMemberForm: UntypedFormGroup;
   /** Add family member template. */
   addFamilyMemberTemplate: any;
   /** Family Members Details */
@@ -36,7 +36,7 @@ export class EditFamilyMemberComponent implements OnInit {
    * @param {ClientsService} clientsService Clients Service
    * @param {SettingsService} settingsService Setting service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private dateUtils: Dates,
               private router: Router,
               private route: ActivatedRoute,

src/app/clients/edit-client/edit-client.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators, UntypedFormControl } from '@angular/forms';
 
 /** Custom Services */
 import { ClientsService } from '../clients.service';
@@ -26,7 +26,7 @@ export class EditClientComponent implements OnInit {
   /** Client Data and Template */
   clientDataAndTemplate: any;
   /** Edit Client Form */
-  editClientForm: FormGroup;
+  editClientForm: UntypedFormGroup;
 
   /** Office Options */
   officeOptions: any;
@@ -55,7 +55,7 @@ export class EditClientComponent implements OnInit {
    * @param {Dates} dateUtils Date Utils
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private route: ActivatedRoute,
               private router: Router,
               private clientsService: ClientsService,
@@ -139,14 +139,14 @@ export class EditClientComponent implements OnInit {
       if (legalFormId === 1) {
         this.editClientForm.removeControl('fullname');
         this.editClientForm.removeControl('clientNonPersonDetails');
-        this.editClientForm.addControl('firstname', new FormControl(this.clientDataAndTemplate.firstname, Validators.required));
-        this.editClientForm.addControl('middlename', new FormControl(this.clientDataAndTemplate.middlename));
-        this.editClientForm.addControl('lastname', new FormControl(this.clientDataAndTemplate.lastname, Validators.required));
+        this.editClientForm.addControl('firstname', new UntypedFormControl(this.clientDataAndTemplate.firstname, Validators.required));
+        this.editClientForm.addControl('middlename', new UntypedFormControl(this.clientDataAndTemplate.middlename));
+        this.editClientForm.addControl('lastname', new UntypedFormControl(this.clientDataAndTemplate.lastname, Validators.required));
       } else {
         this.editClientForm.removeControl('firstname');
         this.editClientForm.removeControl('middlename');
         this.editClientForm.removeControl('lastname');
-        this.editClientForm.addControl('fullname', new FormControl(this.clientDataAndTemplate.fullname, Validators.required));
+        this.editClientForm.addControl('fullname', new UntypedFormControl(this.clientDataAndTemplate.fullname, Validators.required));
         this.editClientForm.addControl('clientNonPersonDetails', this.formBuilder.group({
           'constitutionId': [this.clientDataAndTemplate.clientNonPersonDetails.constitution && this.clientDataAndTemplate.clientNonPersonDetails.constitution.id, Validators.required],
           'incorpValidityTillDate': [this.clientDataAndTemplate.clientNonPersonDetails.incorpValidityTillDate && new Date(this.clientDataAndTemplate.clientNonPersonDetails.incorpValidityTillDate)],

src/app/collaterals/edit-collateral/edit-collateral.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -16,7 +16,7 @@ export class EditCollateralComponent implements OnInit {
 
 
   /** Client Collateral Form */
-  clientCollateralForm: FormGroup;
+  clientCollateralForm: UntypedFormGroup;
   /** Client Collateral Options */
   clientCollateralOptions: any;
   /** Client Id */
@@ -33,7 +33,7 @@ export class EditCollateralComponent implements OnInit {
    * @param {CollateralsService} collateralService Collateral Service
    */
   constructor(
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private settingsService: SettingsService,

src/app/collections/individual-collection-sheet/individual-collection-sheet.component.html

@@ -104,7 +104,7 @@
           <ng-container matColumnDef="actions">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
             <td mat-cell *matCellDef="let loan; let i = index">
-              <button mat-raised-button color="primary" (click)="showAndStorePaymentDetails('loans-accounts', loan, i)">Add Payment</button>
+              <button mat-raised-button color="primary" (click)="showAndStorePaymentDetails('loans/accounts', loan, i)">Add Payment</button>
             </td>
           </ng-container>
 

src/app/collections/individual-collection-sheet/individual-collection-sheet.component.ts

@@ -4,7 +4,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Services Import */
@@ -45,7 +45,7 @@ export class IndividualCollectionSheetComponent implements OnInit {
   /** Maximum Date allowed. */
   maxDate = new Date();
   /** Collection Sheet form. */
-  collectionSheetForm: FormGroup;
+  collectionSheetForm: UntypedFormGroup;
   /** Toggles b/w form and table */
   isCollapsed = false;
   /** Collections Sheet Data */
@@ -87,7 +87,7 @@ export class IndividualCollectionSheetComponent implements OnInit {
    * @param {Router} router Router for navigation.
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private collectionsService: CollectionsService,
               private route: ActivatedRoute,
               private dateUtils: Dates,

src/app/configuration-wizard/configuration-wizard.module.ts

@@ -23,32 +23,25 @@ import { SharedModule } from '../shared/shared.module';
  * Configuration Wizard Module
  */
 @NgModule({
-  declarations: [
-    PopoverComponent,
-    PopoverCloseDirective,
-    PopoverArrowDirective,
-    ConfigurationWizardComponent,
-    ContinueSetupDialogComponent,
-    NextStepDialogComponent,
-    CompletionDialogComponent
-  ],
-  imports: [
-    SharedModule,
-    CommonModule,
-    OverlayModule,
-    PortalModule,
-    MatDialogModule
-  ],
-  exports: [
-    PopoverCloseDirective
-  ],
-  entryComponents: [
-    PopoverComponent,
-    ConfigurationWizardComponent,
-    ContinueSetupDialogComponent,
-    NextStepDialogComponent,
-    CompletionDialogComponent
-  ]
+    declarations: [
+        PopoverComponent,
+        PopoverCloseDirective,
+        PopoverArrowDirective,
+        ConfigurationWizardComponent,
+        ContinueSetupDialogComponent,
+        NextStepDialogComponent,
+        CompletionDialogComponent
+    ],
+    imports: [
+        SharedModule,
+        CommonModule,
+        OverlayModule,
+        PortalModule,
+        MatDialogModule
+    ],
+    exports: [
+        PopoverCloseDirective
+    ]
 })
 
 export class ConfigurationWizardModule { }

src/app/core/http/http.service.ts

@@ -14,7 +14,7 @@ import { ApiPrefixInterceptor } from './api-prefix.interceptor';
  * HttpClient is declared in a re-exported module, so we have to extend the original module to make it work properly.
  * (see https://github.com/Microsoft/TypeScript/issues/13897)
  */
-declare module '@angular/common/http/http' {
+declare module '@angular/common/http' {
 
   /**
    * Augment HttpClient with the added configuration methods from HttpService, to allow in-place replacement of

src/app/core/progress-bar/progress.interceptor.ts

@@ -4,7 +4,7 @@ import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
-import { tap, catchError } from 'rxjs/operators';
+import { finalize } from 'rxjs/operators';
 
 /** Custom Services */
 import { ProgressBarService } from './progress-bar.service';
@@ -28,17 +28,9 @@ export class ProgressInterceptor implements HttpInterceptor {
     this.progressBarService.increase();
     return next.handle(request)
       .pipe(
-        tap(event => {
-          if (event instanceof HttpResponse) {
-            this.progressBarService.decrease();
-          }
-        })
-      )
-      .pipe(
-        catchError(error => {
-          this.progressBarService.decrease();
-          throw error;
-        })
+        finalize(
+          () => { this.progressBarService.decrease(); }
+        )
       );
   }
 

src/app/core/shell/toolbar/toolbar.component.html

@@ -54,10 +54,6 @@
     <mifosx-language-selector class="ml-1 language" fxHide.lt-md></mifosx-language-selector>
   </div>
 
-  <div #themePicker>
-    <mifosx-theme-picker fxHide.lt-md></mifosx-theme-picker>
-  </div>
-
   <div #notifications>
     <mifosx-notifications-tray fxHide.lt-md></mifosx-notifications-tray>
   </div>

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-account-charges-step.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, Input, OnChanges } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 
 /** Dialog Components */
@@ -30,7 +30,7 @@ export class FixedDepositAccountChargesStepComponent implements OnInit, OnChange
   /** Validity of fixed depsits account form */
   @Input() fixedDepositAccountFormValid: boolean;
   /** Currency Code */
-  @Input() currencyCode: FormControl;
+  @Input() currencyCode: UntypedFormControl;
 
   /** Charges Data */
   chargeData: any;

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-currency-step/fixed-deposit-account-currency-step.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnChanges, Input } from '@angular/core';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 
 /**
  * Fixed Deposit Account Currency Step
@@ -18,14 +18,14 @@ export class FixedDepositAccountCurrencyStepComponent implements OnChanges {
   @Input() fixedDepositsAccountProductTemplate: any;
 
   /** Fixed Deposit Account Currency Form */
-  fixedDepositAccountCurrencyForm: FormGroup;
+  fixedDepositAccountCurrencyForm: UntypedFormGroup;
   /** Currency Data */
   currencyData: any;
 
   /**
    * @param {FormBuilder} formBuilder Form Builder
    */
-  constructor(private formBuilder: FormBuilder) {
+  constructor(private formBuilder: UntypedFormBuilder) {
     this.createFixedDepositAccountCurrencyForm();
   }
 

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { SettingsService } from 'app/settings/settings.service';
 
 /** Custom Services */
@@ -30,7 +30,7 @@ export class FixedDepositAccountDetailsStepComponent implements OnInit {
   /** For edit savings form */
   isFieldOfficerPatched = false;
   /** Fixed Deposits Account Details Form */
-  fixedDepositAccountDetailsForm: FormGroup;
+  fixedDepositAccountDetailsForm: UntypedFormGroup;
 
   /** Fixed Deposits Account Template with product data  */
   @Output() fixedDepositsAccountProductTemplate = new EventEmitter();
@@ -41,7 +41,7 @@ export class FixedDepositAccountDetailsStepComponent implements OnInit {
    * @param {FixedDepositsService} fixedDepositsService Fixed Deposits Service.
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private fixedDepositsService: FixedDepositsService,
               private settingsService: SettingsService) {
     this.createFixedDepositsAccountDetailsForm();

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

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, Input, OnChanges } from '@angular/core';
-import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, UntypedFormControl, Validators } from '@angular/forms';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -23,7 +23,7 @@ export class FixedDepositAccountSettingsStepComponent implements OnInit, OnChang
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Fixed Deposits Account Settings Form */
-  fixedDepositAccountSettingsForm: FormGroup;
+  fixedDepositAccountSettingsForm: UntypedFormGroup;
   /** Lockin Period Frequency Type Data */
   lockinPeriodFrequencyTypeData: any;
   /** Period Frequency Type Data */
@@ -37,7 +37,7 @@ export class FixedDepositAccountSettingsStepComponent implements OnInit, OnChang
    * @param {FormBuilder} formBuilder Form Builder
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private settingsService: SettingsService) {
     this.createFixedDepositAccountSettingsForm();
     this.buildDependencies();
@@ -57,10 +57,10 @@ export class FixedDepositAccountSettingsStepComponent implements OnInit, OnChang
         'preClosurePenalInterestOnTypeId': this.fixedDepositsAccountProductTemplate.preClosurePenalInterestOnType ? this.fixedDepositsAccountProductTemplate.preClosurePenalInterestOnType.id : ''
       });
       if (this.fixedDepositsAccountProductTemplate.withHoldTax) {
-        this.fixedDepositAccountSettingsForm.addControl('withHoldTax', new FormControl(false));
+        this.fixedDepositAccountSettingsForm.addControl('withHoldTax', new UntypedFormControl(false));
         this.fixedDepositAccountSettingsForm.get('withHoldTax').valueChanges.subscribe((value: boolean) => {
           if (value) {
-            this.fixedDepositAccountSettingsForm.addControl('taxGroupId', new FormControl({ value: '', disabled: true }));
+            this.fixedDepositAccountSettingsForm.addControl('taxGroupId', new UntypedFormControl({ value: '', disabled: true }));
             this.fixedDepositAccountSettingsForm.get('taxGroupId').patchValue(this.fixedDepositsAccountProductTemplate.taxGroup && this.fixedDepositsAccountProductTemplate.taxGroup.name);
           } else {
             this.fixedDepositAccountSettingsForm.removeControl('taxGroupId');
@@ -111,7 +111,7 @@ export class FixedDepositAccountSettingsStepComponent implements OnInit, OnChang
   buildDependencies() {
     this.fixedDepositAccountSettingsForm.get('transferInterestToSavings').valueChanges.subscribe((value: boolean) => {
       if (value) {
-        this.fixedDepositAccountSettingsForm.addControl('linkAccountId', new FormControl('', Validators.required));
+        this.fixedDepositAccountSettingsForm.addControl('linkAccountId', new UntypedFormControl('', Validators.required));
         this.fixedDepositAccountSettingsForm.get('linkAccountId').patchValue(this.fixedDepositsAccountTemplate.linkedAccount && this.fixedDepositsAccountTemplate.linkedAccount.id);
       } else {
         this.fixedDepositAccountSettingsForm.removeControl('linkAccountId');

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-terms-step/fixed-deposit-account-terms-step.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, Input, OnChanges } from '@angular/core';
-import { FormGroup, FormBuilder, Validators} from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators} from '@angular/forms';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -23,7 +23,7 @@ export class FixedDepositAccountTermsStepComponent implements OnInit, OnChanges
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Fixed Deposits Account Terms Form */
-  fixedDepositAccountTermsForm: FormGroup;
+  fixedDepositAccountTermsForm: UntypedFormGroup;
   /** Interest Compounding Period Type Data */
   interestCompoundingPeriodTypeData: any;
   /** Interest Posting Period Type Data */
@@ -39,7 +39,7 @@ export class FixedDepositAccountTermsStepComponent implements OnInit, OnChanges
    * @param {FormBuilder} formBuilder Form Builder
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private settingsService: SettingsService) {
     this.createFixedDepositsAccountTermsForm();
   }

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/activate-fixed-deposits-account/activate-fixed-deposits-account.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
 
@@ -23,7 +23,7 @@ export class ActivateFixedDepositsAccountComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Activate Fixed Deposits Account form. */
-  activateFixedDepositsAccountForm: FormGroup;
+  activateFixedDepositsAccountForm: UntypedFormGroup;
   /** Fixed Deposits Account Id */
   accountId: any;
 
@@ -36,7 +36,7 @@ export class ActivateFixedDepositsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private savingsService: SavingsService,
               private dateUtils: Dates,
               private route: ActivatedRoute,

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/add-charge-fixed-deposits-account/add-charge-fixed-deposits-account.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
 
@@ -24,7 +24,7 @@ export class AddChargeFixedDepositsAccountComponent implements OnInit {
   /** Maximum Due Date allowed. */
   maxDate = new Date();
   /** Add Fixed Deposits Charge form. */
-  fixedDepositsChargeForm: FormGroup;
+  fixedDepositsChargeForm: UntypedFormGroup;
   /** savings charge options. */
   savingsChargeOptions: any;
   /** savings Id of the savings account. */
@@ -42,7 +42,7 @@ export class AddChargeFixedDepositsAccountComponent implements OnInit {
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private dateUtils: Dates,
@@ -76,17 +76,17 @@ export class AddChargeFixedDepositsAccountComponent implements OnInit {
           this.chargeDetails.chargeTimeTypeAnnualOrMonth = true;
         }
         if (!this.chargeDetails.dueDateNotRequired && !this.chargeDetails.chargeTimeTypeAnnualOrMonth) {
-          this.fixedDepositsChargeForm.addControl('dueDate', new FormControl('', Validators.required));
+          this.fixedDepositsChargeForm.addControl('dueDate', new UntypedFormControl('', Validators.required));
         } else {
           this.fixedDepositsChargeForm.removeControl('dueDate');
         }
         if (!this.chargeDetails.dueDateNotRequired && this.chargeDetails.chargeTimeTypeAnnualOrMonth) {
-          this.fixedDepositsChargeForm.addControl('feeOnMonthDay', new FormControl('', Validators.required));
+          this.fixedDepositsChargeForm.addControl('feeOnMonthDay', new UntypedFormControl('', Validators.required));
         } else {
           this.fixedDepositsChargeForm.removeControl('feeOnMonthDay');
         }
         if (chargeTimeType.value === 'Monthly Fee') {
-          this.fixedDepositsChargeForm.addControl('feeInterval', new FormControl(data.feeInterval, Validators.required));
+          this.fixedDepositsChargeForm.addControl('feeInterval', new UntypedFormControl(data.feeInterval, Validators.required));
         } else {
           this.fixedDepositsChargeForm.removeControl('feeInterval');
         }

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/approve-fixed-deposits-account/approve-fixed-deposits-account.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
 
@@ -23,7 +23,7 @@ export class ApproveFixedDepositsAccountComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Approve Fixed Deposits Account form. */
-  approveFixedDepositsAccountForm: FormGroup;
+  approveFixedDepositsAccountForm: UntypedFormGroup;
   /** Fixed Deposits Account Id */
   accountId: any;
 
@@ -35,7 +35,7 @@ export class ApproveFixedDepositsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private fixedDepositsService: FixedDepositsService,
               private dateUtils: Dates,
               private route: ActivatedRoute,

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/close-fixed-deposits-account/close-fixed-deposits-account.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class CloseFixedDepositsAccountComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Close on maturity FD Account form. */
-  closeOnMaturityAccountForm: FormGroup;
+  closeOnMaturityAccountForm: UntypedFormGroup;
   /** Savings Account Data */
   savingsAccountsData: any;
   /** On account Closure Options */
@@ -42,7 +42,7 @@ export class CloseFixedDepositsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private fixedDepositsService: FixedDepositsService,
               private dateUtils: Dates,
               private route: ActivatedRoute,
@@ -83,8 +83,8 @@ export class CloseFixedDepositsAccountComponent implements OnInit {
   addTransferDetails() {
     this.closeOnMaturityAccountForm.get('onAccountClosureId').valueChanges.subscribe((id: any) => {
       if (id === 200) {
-        this.closeOnMaturityAccountForm.addControl('toSavingsAccountId', new FormControl('', Validators.required));
-        this.closeOnMaturityAccountForm.addControl('transferDescription', new FormControl(''));
+        this.closeOnMaturityAccountForm.addControl('toSavingsAccountId', new UntypedFormControl('', Validators.required));
+        this.closeOnMaturityAccountForm.addControl('transferDescription', new UntypedFormControl(''));
       } else {
         this.closeOnMaturityAccountForm.removeControl('toSavingsAccountId');
         this.closeOnMaturityAccountForm.removeControl('transferDescription');

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/premature-close-fixed-deposits-account/premature-close-fixed-deposits-account.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class PrematureCloseFixedDepositsAccountComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Premature Close FD Account form. */
-  prematureCloseAccountForm: FormGroup;
+  prematureCloseAccountForm: UntypedFormGroup;
   /** Savings Account Data */
   savingsAccountsData: any;
   /** On account Closure Options */
@@ -42,7 +42,7 @@ export class PrematureCloseFixedDepositsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private fixedDepositsService: FixedDepositsService,
     private dateUtils: Dates,
     private route: ActivatedRoute,
@@ -96,9 +96,9 @@ export class PrematureCloseFixedDepositsAccountComponent implements OnInit {
       .subscribe((response: any) => {
         this.savingsAccountsData = response.savingsAccounts;
         this.onAccountClosureOptions = response.onAccountClosureOptions;
-        this.prematureCloseAccountForm.addControl('maturityAmount', new FormControl({ value: '', disabled: true }));
-        this.prematureCloseAccountForm.addControl('onAccountClosureId', new FormControl('', Validators.required));
-        this.prematureCloseAccountForm.addControl('note', new FormControl(''));
+        this.prematureCloseAccountForm.addControl('maturityAmount', new UntypedFormControl({ value: '', disabled: true }));
+        this.prematureCloseAccountForm.addControl('onAccountClosureId', new UntypedFormControl('', Validators.required));
+        this.prematureCloseAccountForm.addControl('note', new UntypedFormControl(''));
         this.prematureCloseAccountForm.get('maturityAmount').patchValue(response.maturityAmount);
         this.addTransferDetails();
       });
@@ -111,8 +111,8 @@ export class PrematureCloseFixedDepositsAccountComponent implements OnInit {
   addTransferDetails() {
     this.prematureCloseAccountForm.get('onAccountClosureId').valueChanges.subscribe((id: any) => {
       if (id === 200) {
-        this.prematureCloseAccountForm.addControl('toSavingsAccountId', new FormControl('', Validators.required));
-        this.prematureCloseAccountForm.addControl('transferDescription', new FormControl(''));
+        this.prematureCloseAccountForm.addControl('toSavingsAccountId', new UntypedFormControl('', Validators.required));
+        this.prematureCloseAccountForm.addControl('transferDescription', new UntypedFormControl(''));
       } else {
         this.prematureCloseAccountForm.removeControl('toSavingsAccountId');
         this.prematureCloseAccountForm.removeControl('transferDescription');

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/reject-fixed-deposits-account/reject-fixed-deposits-account.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
 
@@ -23,7 +23,7 @@ export class RejectFixedDepositsAccountComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Reject Fixed Deposit Account form. */
-  rejectFixedDepositsAccountForm: FormGroup;
+  rejectFixedDepositsAccountForm: UntypedFormGroup;
   /** Fixed Deposits Account Id */
   accountId: any;
 
@@ -35,7 +35,7 @@ export class RejectFixedDepositsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private fixedDepositsService: FixedDepositsService,
               private dateUtils: Dates,
               private route: ActivatedRoute,

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/undo-approval-fixed-deposits-account/undo-approval-fixed-deposits-account.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -17,7 +17,7 @@ import { SavingsService } from 'app/savings/savings.service';
 export class UndoApprovalFixedDepositsAccountComponent implements OnInit {
 
   /** Undo Approval Fixed Deposits Account form. */
-  undoApprovalFixedDepositsAccountForm: FormGroup;
+  undoApprovalFixedDepositsAccountForm: UntypedFormGroup;
   /** Fixed Deposits Account Id */
   accountId: any;
 
@@ -28,7 +28,7 @@ export class UndoApprovalFixedDepositsAccountComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private savingsService: SavingsService,
               private route: ActivatedRoute,
               private router: Router) {

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/withdraw-by-client-fixed-deposits-account/withdraw-by-client-fixed-deposits-account.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
 
@@ -23,7 +23,7 @@ export class WithdrawByClientFixedDepositsAccountComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Withdraw Fixed Deposits Account form. */
-  withdrawFixedDepositsAccountForm: FormGroup;
+  withdrawFixedDepositsAccountForm: UntypedFormGroup;
   /** Fixed Deposits Account Id */
   accountId: any;
 
@@ -35,7 +35,7 @@ export class WithdrawByClientFixedDepositsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
               private fixedDepositsService: FixedDepositsService,
               private dateUtils: Dates,
               private route: ActivatedRoute,

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/activate-recurring-deposits-account/activate-recurring-deposits-account.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class ActivateRecurringDepositsAccountComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Activate Recurring Deposits Account form. */
-  activateRecurringDepositsAccountForm: FormGroup;
+  activateRecurringDepositsAccountForm: UntypedFormGroup;
   /** Recurring Deposits Account Id */
   accountId: any;
 
@@ -35,7 +35,7 @@ export class ActivateRecurringDepositsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SavingsService} savingsService Savings Service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private recurringDepositsService: RecurringDepositsService,
     private dateUtils: Dates,
     private route: ActivatedRoute,

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/add-charge-recurring-deposits-account/add-charge-recurring-deposits-account.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
 
@@ -24,7 +24,7 @@ export class AddChargeRecurringDepositsAccountComponent implements OnInit {
   /** Maximum Due Date allowed. */
   maxDate = new Date();
   /** Add Recurring Deposits Charge form. */
-  recurringDepositsChargeForm: FormGroup;
+  recurringDepositsChargeForm: UntypedFormGroup;
   /** savings charge options. */
   savingsChargeOptions: any;
   /** savings Id of the savings account. */
@@ -41,7 +41,7 @@ export class AddChargeRecurringDepositsAccountComponent implements OnInit {
    * @param {SavingsService} savingsService Savings Service
    */
   constructor(
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private dateUtils: Dates,
@@ -75,17 +75,17 @@ export class AddChargeRecurringDepositsAccountComponent implements OnInit {
           this.chargeDetails.chargeTimeTypeAnnualOrMonth = true;
         }
         if (!this.chargeDetails.dueDateNotRequired && !this.chargeDetails.chargeTimeTypeAnnualOrMonth) {
-          this.recurringDepositsChargeForm.addControl('dueDate', new FormControl('', Validators.required));
+          this.recurringDepositsChargeForm.addControl('dueDate', new UntypedFormControl('', Validators.required));
         } else {
           this.recurringDepositsChargeForm.removeControl('dueDate');
         }
         if (!this.chargeDetails.dueDateNotRequired && this.chargeDetails.chargeTimeTypeAnnualOrMonth) {
-          this.recurringDepositsChargeForm.addControl('feeOnMonthDay', new FormControl('', Validators.required));
+          this.recurringDepositsChargeForm.addControl('feeOnMonthDay', new UntypedFormControl('', Validators.required));
         } else {
           this.recurringDepositsChargeForm.removeControl('feeOnMonthDay');
         }
         if (chargeTimeType.value === 'Monthly Fee') {
-          this.recurringDepositsChargeForm.addControl('feeInterval', new FormControl(data.feeInterval, Validators.required));
+          this.recurringDepositsChargeForm.addControl('feeInterval', new UntypedFormControl(data.feeInterval, Validators.required));
         } else {
           this.recurringDepositsChargeForm.removeControl('feeInterval');
         }

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/approve-recurring-deposits-account/approve-recurring-deposits-account.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -23,7 +23,7 @@ export class ApproveRecurringDepositsAccountComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Approve Recurring Deposits Account form. */
-  approveRecurringDepositsAccountForm: FormGroup;
+  approveRecurringDepositsAccountForm: UntypedFormGroup;
   /** Recurring Deposits Account Id */
   accountId: any;
 
@@ -35,7 +35,7 @@ export class ApproveRecurringDepositsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private recurringDepositsService: RecurringDepositsService,
     private dateUtils: Dates,
     private route: ActivatedRoute,

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/close-recurring-deposits-account/close-recurring-deposits-account.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -35,7 +35,7 @@ export class CloseRecurringDepositsAccountComponent implements OnInit {
   /** Maximum Date allowed. */
   maxDate = new Date();
   /** Close Recurring Deposit Account form. */
-  closeRecurringDepositForm: FormGroup;
+  closeRecurringDepositForm: UntypedFormGroup;
 
   /**
    * Retrieves action details template data from `resolve`
@@ -46,7 +46,7 @@ export class CloseRecurringDepositsAccountComponent implements OnInit {
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private dateUtils: Dates,

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -33,7 +33,7 @@ export class DepositRecurringDepositsAccountComponent implements OnInit {
   /** Maximum Date allowed. */
   maxDate = new Date();
   /** Deposits Recurring Deposit Account form. */
-  depositRecurringDepositForm: FormGroup;
+  depositRecurringDepositForm: UntypedFormGroup;
 
   /**
    * Retrieves action details transactions template data from `resolve`
@@ -44,7 +44,7 @@ export class DepositRecurringDepositsAccountComponent implements OnInit {
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private dateUtils: Dates,

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/premature-close-recurring-deposit-account/premature-close-recurring-deposit-account.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -24,7 +24,7 @@ export class PrematureCloseRecurringDepositAccountComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** premature close Recurring Deposits Account form. */
-  prematureCloseRecurringDepositsAccountForm: FormGroup;
+  prematureCloseRecurringDepositsAccountForm: UntypedFormGroup;
   /** Recurring Deposits Account Id */
   accountId: any;
 
@@ -36,7 +36,7 @@ export class PrematureCloseRecurringDepositAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private recurringDepositsService: RecurringDepositsService,
     private dateUtils: Dates,
     private route: ActivatedRoute,

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/reject-recurring-deposits-account/reject-recurring-deposits-account.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -24,7 +24,7 @@ export class RejectRecurringDepositsAccountComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Reject Recurring Deposits Account form. */
-  rejectRecurringDepositsAccountForm: FormGroup;
+  rejectRecurringDepositsAccountForm: UntypedFormGroup;
   /** Recurring Deposits Account Id */
   accountId: any;
 
@@ -36,7 +36,7 @@ export class RejectRecurringDepositsAccountComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private recurringDepositsService: RecurringDepositsService,
     private dateUtils: Dates,
     private route: ActivatedRoute,

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/undo-approval-recurring-deposits-account/undo-approval-recurring-deposits-account.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
@@ -17,7 +17,7 @@ import { RecurringDepositsService } from '../../recurring-deposits.service';
 export class UndoApprovalRecurringDepositsAccountComponent implements OnInit {
 
   /** Undo Approval Recurring Deposits Account form. */
-  undoApprovalRecurringDepositsAccountForm: FormGroup;
+  undoApprovalRecurringDepositsAccountForm: UntypedFormGroup;
   /** Recurring Deposits Account Id */
   accountId: any;
 
@@ -27,7 +27,7 @@ export class UndoApprovalRecurringDepositsAccountComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private recurringDepositsService: RecurringDepositsService,
     private route: ActivatedRoute,
     private router: Router) {

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/withdraw-by-client-recurring-deposits-account/withdraw-by-client-recurring-deposits-account.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
 
@@ -22,7 +22,7 @@ export class WithdrawByClientRecurringDepositsAccountComponent implements OnInit
   /** Maximum date allowed. */
   maxDate = new Date();
   /** Withdraw Recurring Deposits Account form. */
-  withdrawRecurringDepositsAccountForm: FormGroup;
+  withdrawRecurringDepositsAccountForm: UntypedFormGroup;
   /** Recurring Deposits Account Id */
   accountId: any;
 
@@ -34,7 +34,7 @@ export class WithdrawByClientRecurringDepositsAccountComponent implements OnInit
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private recurringDepositsService: RecurringDepositsService,
     private dateUtils: Dates,
     private route: ActivatedRoute,

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

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, Input, OnChanges } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 
 /** Dialog Components */
@@ -26,7 +26,7 @@ export class RecurringDepositsAccountChargesStepComponent implements OnInit, OnC
 
   @Input() recurringDepositsAccountTemplate: any;
   @Input() recurringDepositsAccountProductTemplate: any;
-  @Input() currencyCode: FormControl;
+  @Input() currencyCode: UntypedFormControl;
   @Input() recurringDepositAccountFormValid: boolean;
 
   /** Charges Data */

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

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, Input, OnChanges } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 
 /**
  * Recurring Deposit Account Currency Step
@@ -17,11 +17,11 @@ export class RecurringDepositsAccountCurrencyStepComponent implements OnInit, On
   @Input() recurringDepositsAccountProductTemplate: any;
 
   /** Recurring Deposit Account Currency Form */
-  recurringDepositAccountCurrencyForm: FormGroup;
+  recurringDepositAccountCurrencyForm: UntypedFormGroup;
   /** Currency Data */
   currencyData: any;
 
-  constructor(private formBuilder: FormBuilder) {
+  constructor(private formBuilder: UntypedFormBuilder) {
     this.createRecurringDepositAccountCurrencyForm();
   }
 

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

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { SettingsService } from 'app/settings/settings.service';
 
 /** Custom Services */
@@ -30,7 +30,7 @@ export class RecurringDepositsAccountDetailsStepComponent implements OnInit {
   /** For edit recurring deposits form */
   isFieldOfficerPatched = false;
   /** Recurring Deposits Account Details Form */
-  recurringDepositAccountDetailsForm: FormGroup;
+  recurringDepositAccountDetailsForm: UntypedFormGroup;
 
   /** Recurring Deposits Account Template with product data  */
   @Output() recurringDepositsAccountProductTemplate = new EventEmitter();
@@ -41,7 +41,7 @@ export class RecurringDepositsAccountDetailsStepComponent implements OnInit {
    * @param {RecurringDepositsService} recurringDepositsService Recurring Deposits Service.
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: UntypedFormBuilder,
     private recurringDepositsService: RecurringDepositsService,
     private settingsService: SettingsService) {
     this.createRecurringDepositsAccountDetailsForm();