feat(client): make form strongly typed

apps/client/src/app/pages/accounts/transfer-balance/interfaces/interfaces.ts

@@ -1,5 +1,12 @@
+import { FormControl, FormGroup } from '@angular/forms';
 import { Account } from '@prisma/client';
 
 export interface TransferBalanceDialogParams {
   accounts: Account[];
 }
+
+export type TransferBalanceForm = FormGroup<{
+  balance: FormControl<number | string | null>;
+  fromAccount: FormControl<string | null>;
+  toAccount: FormControl<string | null>;
+}>;

apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.component.ts

@@ -3,8 +3,7 @@ import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo';
 
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import {
-  AbstractControl,
-  FormBuilder,
+  FormControl,
   FormGroup,
   ReactiveFormsModule,
   ValidationErrors,
@@ -21,7 +20,10 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { Account } from '@prisma/client';
 
-import { TransferBalanceDialogParams } from './interfaces/interfaces';
+import {
+  TransferBalanceDialogParams,
+  TransferBalanceForm
+} from './interfaces/interfaces';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -42,31 +44,32 @@ import { TransferBalanceDialogParams } from './interfaces/interfaces';
 export class GfTransferBalanceDialogComponent {
   public accounts: Account[] = [];
   public currency: string;
-  public transferBalanceForm: FormGroup;
+  public transferBalanceForm: TransferBalanceForm;
 
   public constructor(
     @Inject(MAT_DIALOG_DATA) public data: TransferBalanceDialogParams,
-    public dialogRef: MatDialogRef<GfTransferBalanceDialogComponent>,
-    private formBuilder: FormBuilder
+    public dialogRef: MatDialogRef<GfTransferBalanceDialogComponent>
   ) {}
 
   public ngOnInit() {
     this.accounts = this.data.accounts;
 
-    this.transferBalanceForm = this.formBuilder.group(
+    this.transferBalanceForm = new FormGroup(
       {
-        balance: ['', Validators.required],
-        fromAccount: ['', Validators.required],
-        toAccount: ['', Validators.required]
+        balance: new FormControl<number | string | null>(
+          '',
+          Validators.required
+        ),
+        fromAccount: new FormControl<string | null>('', Validators.required),
+        toAccount: new FormControl<string | null>('', Validators.required)
       },
       {
         validators: this.compareAccounts
       }
     );
 
-    this.transferBalanceForm
-      .get('fromAccount')
-      ?.valueChanges.subscribe((id) => {
+    this.transferBalanceForm.controls.fromAccount.valueChanges.subscribe(
+      (id) => {
         const currency = this.accounts.find((account) => {
           return account.id === id;
         })?.currency;
@@ -74,7 +77,8 @@ export class GfTransferBalanceDialogComponent {
         if (currency) {
           this.currency = currency;
         }
-      });
+      }
+    );
   }
 
   public onCancel() {
@@ -83,19 +87,22 @@ export class GfTransferBalanceDialogComponent {
 
   public onSubmit() {
     const account: TransferBalanceDto = {
-      accountIdFrom: this.transferBalanceForm.get('fromAccount')?.value,
-      accountIdTo: this.transferBalanceForm.get('toAccount')?.value,
-      balance: this.transferBalanceForm.get('balance')?.value
+      accountIdFrom: this.transferBalanceForm.controls.fromAccount.value ?? '',
+      accountIdTo: this.transferBalanceForm.controls.toAccount.value ?? '',
+      balance: Number(this.transferBalanceForm.controls.balance.value)
     };
 
     this.dialogRef.close({ account });
   }
 
-  private compareAccounts(control: AbstractControl): ValidationErrors | null {
-    const accountFrom = control.get('fromAccount');
-    const accountTo = control.get('toAccount');
+  private compareAccounts(
+    control: TransferBalanceForm
+  ): ValidationErrors | null {
+    const formGroup = control;
+    const accountFrom = formGroup.controls.fromAccount;
+    const accountTo = formGroup.controls.toAccount;
 
-    if (accountFrom?.value === accountTo?.value) {
+    if (accountFrom.value === accountTo.value) {
       return { invalid: true };
     }