Migrate UntypedFormControl to FormControl

apps/client/src/app/components/admin-jobs/admin-jobs.component.ts

@@ -5,7 +5,7 @@ import {
   OnDestroy,
   OnInit
 } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@angular/forms';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { QUEUE_JOB_STATUS_LIST } from '@ghostfolio/common/config';
@@ -23,7 +23,7 @@ import { takeUntil } from 'rxjs/operators';
 })
 export class AdminJobsComponent implements OnDestroy, OnInit {
   public defaultDateTimeFormat: string;
-  public filterForm: UntypedFormGroup;
+  public filterForm: FormGroup;
   public jobs: AdminJobs['jobs'] = [];
   public statusFilterOptions = QUEUE_JOB_STATUS_LIST;
   public user: User;
@@ -36,7 +36,7 @@ export class AdminJobsComponent implements OnDestroy, OnInit {
   public constructor(
     private adminService: AdminService,
     private changeDetectorRef: ChangeDetectorRef,
-    private formBuilder: UntypedFormBuilder,
+    private formBuilder: FormBuilder,
     private userService: UserService
   ) {
     this.userService.stateChanged

apps/client/src/app/components/toggle/toggle.component.ts

@@ -7,7 +7,7 @@ import {
   OnInit,
   Output
 } from '@angular/core';
-import { UntypedFormControl } from '@angular/forms';
+import { FormControl } from '@angular/forms';
 import { ToggleOption } from '@ghostfolio/common/types';
 
 @Component({
@@ -23,7 +23,7 @@ export class ToggleComponent implements OnChanges, OnInit {
 
   @Output() change = new EventEmitter<Pick<ToggleOption, 'value'>>();
 
-  public option = new UntypedFormControl();
+  public option = new FormControl<string>(undefined);
 
   public constructor() {}
 

apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.component.ts

@@ -6,11 +6,7 @@ import {
   OnDestroy,
   ViewChild
 } from '@angular/core';
-import {
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-  UntypedFormBuilder,
-  UntypedFormGroup,
-  Validators
-} from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@@ -43,7 +39,7 @@ import { CreateOrUpdateTransactionDialogParams } from './interfaces/interfaces';
 export class CreateOrUpdateTransactionDialog implements OnDestroy {
   @ViewChild('autocomplete') autocomplete;
 
-  public activityForm: UntypedFormGroup;
+  public activityForm: FormGroup;
   public assetClasses = Object.keys(AssetClass);
   public assetSubClasses = Object.keys(AssetSubClass);
   public currencies: string[] = [];
@@ -63,7 +59,7 @@ export class CreateOrUpdateTransactionDialog implements OnDestroy {
     private dataService: DataService,
     private dateAdapter: DateAdapter<any>,
     public dialogRef: MatDialogRef<CreateOrUpdateTransactionDialog>,
-    private formBuilder: UntypedFormBuilder,
+    private formBuilder: FormBuilder,
     @Inject(MAT_DATE_LOCALE) private locale: string
   ) {}
 

libs/ui/src/lib/activities-filter/activities-filter.component.ts

@@ -11,7 +11,7 @@ import {
   SimpleChanges,
   ViewChild
 } from '@angular/core';
-import { UntypedFormControl } from '@angular/forms';
+import { FormControl } from '@angular/forms';
 import {
   MatAutocomplete,
   MatAutocompleteSelectedEvent
@@ -41,7 +41,7 @@ export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
   public filterGroups$: Subject<FilterGroup[]> = new BehaviorSubject([]);
   public filters$: Subject<Filter[]> = new BehaviorSubject([]);
   public filters: Observable<Filter[]> = this.filters$.asObservable();
-  public searchControl = new UntypedFormControl();
+  public searchControl = new FormControl<Filter | string>(undefined);
   public selectedFilters: Filter[] = [];
   public separatorKeysCodes: number[] = [ENTER, COMMA];
 
@@ -50,7 +50,7 @@ export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
   public constructor() {
     this.searchControl.valueChanges
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((filterOrSearchTerm: Filter | string) => {
+      .subscribe((filterOrSearchTerm) => {
         if (filterOrSearchTerm) {
           const searchTerm =
             typeof filterOrSearchTerm === 'string'
@@ -80,7 +80,7 @@ export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
       input.value = '';
     }
 
-    this.searchControl.setValue(null);
+    this.searchControl.setValue(undefined);
   }
 
   public onRemoveFilter(aFilter: Filter): void {
@@ -99,7 +99,7 @@ export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
     );
     this.updateFilters();
     this.searchInput.nativeElement.value = '';
-    this.searchControl.setValue(null);
+    this.searchControl.setValue(undefined);
   }
 
   public ngOnDestroy() {

libs/ui/src/lib/activities-table/activities-table.component.ts

@@ -8,7 +8,6 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { UntypedFormControl } from '@angular/forms';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
@@ -62,7 +61,6 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
   public isUUID = isUUID;
   public placeholder = '';
   public routeQueryParams: Subscription;
-  public searchControl = new UntypedFormControl();
   public searchKeywords: string[] = [];
   public totalFees: number;
   public totalValue: number;

libs/ui/src/lib/fire-calculator/fire-calculator.component.ts

@@ -12,7 +12,7 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormControl } from '@angular/forms';
+import { FormBuilder, FormControl } from '@angular/forms';
 import { getTooltipOptions } from '@ghostfolio/common/chart-helper';
 import { primaryColorRgb } from '@ghostfolio/common/config';
 import { transformTickToAbbreviation } from '@ghostfolio/common/helper';
@@ -51,10 +51,10 @@ export class FireCalculatorComponent
   @ViewChild('chartCanvas') chartCanvas;
 
   public calculatorForm = this.formBuilder.group({
-    annualInterestRate: new UntypedFormControl(),
+    annualInterestRate: new FormControl<number>(undefined),
-    paymentPerPeriod: new UntypedFormControl(),
+    paymentPerPeriod: new FormControl<number>(undefined),
-    principalInvestmentAmount: new UntypedFormControl(),
+    principalInvestmentAmount: new FormControl<number>(undefined),
-    time: new UntypedFormControl()
+    time: new FormControl<number>(undefined)
   });
   public chart: Chart;
   public isLoading = true;
@@ -68,7 +68,7 @@ export class FireCalculatorComponent
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private fireCalculatorService: FireCalculatorService,
-    private formBuilder: UntypedFormBuilder
+    private formBuilder: FormBuilder
   ) {
     Chart.register(
       BarController,
@@ -261,15 +261,13 @@ export class FireCalculatorComponent
       this.calculatorForm.get('principalInvestmentAmount').value || 0;
 
     // Payment per period
-    const PMT: number = parseFloat(
+    const PMT = this.calculatorForm.get('paymentPerPeriod').value;
-      this.calculatorForm.get('paymentPerPeriod').value
-    );
 
     // Annual interest rate
     const r: number = this.calculatorForm.get('annualInterestRate').value / 100;
 
     // Time
-    const t: number = parseFloat(this.calculatorForm.get('time').value);
+    const t = this.calculatorForm.get('time').value;
 
     for (let year = currentYear; year < currentYear + t; year++) {
       labels.push(year);