diff --git a/apps/web/src/app/settings/payment-method.component.html b/apps/web/src/app/settings/payment-method.component.html index b4e1db1a58f..fa80027dd8b 100644 --- a/apps/web/src/app/settings/payment-method.component.html +++ b/apps/web/src/app/settings/payment-method.component.html @@ -54,48 +54,25 @@ #verifyForm class="form-inline" (ngSubmit)="verifyBank()" + [formGroup]="verifyBankForm" [appApiAction]="verifyBankPromise" ngNativeValidate > - -
-
-
$0.
-
- -
- -
-
-
$0.
-
- -
+ + {{ "amountX" | i18n: "1" }} + + $0. + + + {{ "amountX" | i18n: "2" }} + + $0. + diff --git a/apps/web/src/app/settings/payment-method.component.ts b/apps/web/src/app/settings/payment-method.component.ts index 6cab4d2599e..7ec86b37c66 100644 --- a/apps/web/src/app/settings/payment-method.component.ts +++ b/apps/web/src/app/settings/payment-method.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit, ViewChild } from "@angular/core"; +import { FormBuilder, FormControl, Validators } from "@angular/forms"; import { ActivatedRoute, Router } from "@angular/router"; import { ApiService } from "@bitwarden/common/abstractions/api.service"; @@ -27,19 +28,31 @@ export class PaymentMethodComponent implements OnInit { org: OrganizationResponse; paymentMethodType = PaymentMethodType; organizationId: string; - verifyAmount1: number; - verifyAmount2: number; verifyBankPromise: Promise; taxFormPromise: Promise; + verifyBankForm = this.formBuilder.group({ + amount1: new FormControl(null, [ + Validators.required, + Validators.max(99), + Validators.min(0), + ]), + amount2: new FormControl(null, [ + Validators.required, + Validators.max(99), + Validators.min(0), + ]), + }); + constructor( protected apiService: ApiService, protected i18nService: I18nService, protected platformUtilsService: PlatformUtilsService, private router: Router, private logService: LogService, - private route: ActivatedRoute + private route: ActivatedRoute, + private formBuilder: FormBuilder ) {} async ngOnInit() { @@ -123,8 +136,8 @@ export class PaymentMethodComponent implements OnInit { try { const request = new VerifyBankRequest(); - request.amount1 = this.verifyAmount1; - request.amount2 = this.verifyAmount2; + request.amount1 = this.verifyBankForm.value.amount1; + request.amount2 = this.verifyBankForm.value.amount2; this.verifyBankPromise = this.apiService.postOrganizationVerifyBank( this.organizationId, request