jank/casino
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add form validation

Browse source
This commit is contained in:
Constantin Simonis 2025-02-13 10:29:08 +01:00
commit 6ba4937538
No known key found for this signature in database
GPG key ID: 3878FF77C24AF4D2
2 changed files with 33 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/app/deposit/deposit.component.html
View file

@ -1,4 +1,7 @@
<form [formGroup]="form"> <form [formGroup]="form">
@if (errorMsg) {
<div>{{ errorMsg }}</div>
}
<input type="number" formControlName="amount">€ <input type="number" formControlName="amount">€
<br> <br>
<button type="button" (click)="submit()">Einzahlen</button> <button type="button" (click)="submit()">Einzahlen</button>

39
frontend/src/app/deposit/deposit.component.ts
View file

@ -1,7 +1,8 @@
import { Component, inject, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { loadStripe, Stripe } from '@stripe/stripe-js'; import { loadStripe, Stripe } from '@stripe/stripe-js';
import { DepositService } from '../service/deposit.service'; import { DepositService } from '../service/deposit.service';
import { debounceTime } from 'rxjs';
@Component({ @Component({
selector: 'app-deposit', selector: 'app-deposit',
@ -10,23 +11,43 @@ import { DepositService } from '../service/deposit.service';
ReactiveFormsModule, ReactiveFormsModule,
], ],
templateUrl: './deposit.component.html', templateUrl: './deposit.component.html',
styleUrl: './deposit.component.css' styleUrl: './deposit.component.css',
changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class DepositComponent implements OnInit{ export class DepositComponent implements OnInit {
protected form = new FormGroup({amount: new FormControl(50, [Validators.min(50)])}); protected form!: FormGroup;
protected errorMsg: string = '';
private stripe: Stripe | null = null; private stripe: Stripe | null = null;
private service: DepositService = inject(DepositService); private service: DepositService = inject(DepositService);
async ngOnInit() { async ngOnInit() {
this.form = new FormGroup({
amount: new FormControl(50, [Validators.min(50)]),
});
this.form.controls['amount'].valueChanges
.pipe(debounceTime(1000))
.subscribe((value) => {
if (value < 50) {
this.errorMsg = 'Minimum Einzahlungsbetrag ist 50€';
}
});
this.stripe = await loadStripe('pk_test_51QrePYIvCfqz7ANgMizBorPpVjJ8S6gcaL4yvcMQnVaKyReqcQ6jqaQEF7aDZbDu8rNVsTZrw8ABek4ToxQX7KZe00jpGh8naG'); this.stripe = await loadStripe('pk_test_51QrePYIvCfqz7ANgMizBorPpVjJ8S6gcaL4yvcMQnVaKyReqcQ6jqaQEF7aDZbDu8rNVsTZrw8ABek4ToxQX7KZe00jpGh8naG');
} }
submit() { submit() {
if (this.stripe) { if (!this.stripe) {
console.log(JSON.stringify(this.form.value.amount as number)); this.errorMsg = 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.';
this.service.handleDeposit(this.form.value.amount as number).subscribe(({sessionId}) => { return;
this.stripe?.redirectToCheckout({sessionId}); }
if (!this.form.valid) {
this.errorMsg = 'Bitte geben Sie einen gültigen Betrag ein.';
return;
}
this.service.handleDeposit(this.form.value.amount as number).subscribe(({ sessionId }) => {
this.stripe?.redirectToCheckout({ sessionId });
}); });
} }
}
} }