diff --git a/apps/client/src/app/pages/accounts/transfer-balance/interfaces/interfaces.ts b/apps/client/src/app/pages/accounts/transfer-balance/interfaces/interfaces.ts index 3a0b921fd..51c42bc5d 100644 --- a/apps/client/src/app/pages/accounts/transfer-balance/interfaces/interfaces.ts +++ b/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; + fromAccount: FormControl; + toAccount: FormControl; +}>; diff --git a/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.component.ts b/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.component.ts index d4717b4d3..e2e89c8cc 100644 --- a/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.component.ts +++ b/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, - private formBuilder: FormBuilder + public dialogRef: MatDialogRef ) {} 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( + '', + Validators.required + ), + fromAccount: new FormControl('', Validators.required), + toAccount: new FormControl('', 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 }; }