diff --git a/frontend/src/app/pages/register-root/register-root.component.ts b/frontend/src/app/pages/register-root/register-root.component.ts index 2d43af1..5820759 100644 --- a/frontend/src/app/pages/register-root/register-root.component.ts +++ b/frontend/src/app/pages/register-root/register-root.component.ts @@ -19,6 +19,7 @@ import { import { ButtonModule } from 'primeng/button'; import { CheckboxModule } from 'primeng/checkbox'; import { PasswordModule } from 'primeng/password'; +import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms'; type AuthAction = 'register' | 'signup'; @@ -66,10 +67,40 @@ export class RegisterRootComponent implements OnInit { public ngOnInit(): void { this.form = this.formBuilder.group({ - email: ['', [Validators.required]], - password: ['', [Validators.required, Validators.minLength(8)]], + email: ['', { + validators: [Validators.required, this.customEmailValidator()], + updateOn: 'change' + }], + password: ['', { + validators: [Validators.required, this.passwordValidator()], + updateOn: 'change' + }], terms: [false, [Validators.requiredTrue]], }); + + this.form.get('email')?.valueChanges.subscribe(value => { + const emailControl = this.form?.get('email'); + if (emailControl) { + if (value.length >= 4) { + emailControl.setValidators([Validators.required, this.customEmailValidator()]); + } else { + emailControl.setValidators([Validators.required, Validators.minLength(4)]); + } + emailControl.updateValueAndValidity({ emitEvent: false }); + } + }); + + this.form?.get('password')?.valueChanges.subscribe(value => { + const passwordControl = this.form?.get('password'); + if (passwordControl) { + if (value.length >= 8) { + passwordControl.setValidators([Validators.required, this.passwordValidator()]); + } else { + passwordControl.setValidators([Validators.required, Validators.minLength(8)]); + } + passwordControl.updateValueAndValidity({ emitEvent: false }); + } + }); } public toggleAction(action: AuthAction): void { @@ -82,15 +113,41 @@ export class RegisterRootComponent implements OnInit { } this.isDisplayButtons.set(false); } + onSubmit() { + const emailControl = this.form?.get('email'); + const passwordControl = this.form?.get('password'); + const termsControl = this.form?.get('terms'); - public onSubmit(): void { - if (this.form && this.isSignupSignal() && this.form.valid) { - this.signin(); - } else if (this.form && this.isRegisterSignal() && this.form.valid) { - this.register(); + // Markieren des E-Mail-Feldes als 'touched' und 'dirty', falls es leer ist oder ungültig + if (!emailControl?.value || emailControl?.invalid) { + emailControl?.markAsTouched(); + emailControl?.markAsDirty(); + emailControl?.updateValueAndValidity(); + } + + // Markieren des Passwort-Feldes als 'touched' und 'dirty', falls es leer ist oder ungültig + if (!passwordControl?.value || passwordControl.invalid) { + passwordControl?.markAsTouched(); + passwordControl?.markAsDirty(); + passwordControl?.updateValueAndValidity(); + } + + if(!termsControl?.value || termsControl.invalid) { + termsControl?.markAsTouched(); + termsControl?.markAsDirty(); + termsControl?.updateValueAndValidity(); + } + + // Formularvalidierung + if (this.form?.valid) { + // Logik zum Absenden des Formulars + console.log('Form submitted:', this.form.value); + } else { + console.log('Form is invalid'); } } + public DEBUG_restSignal(): void { this.isRegisterSignal.set(false); this.isSignupSignal.set(false); @@ -101,6 +158,25 @@ export class RegisterRootComponent implements OnInit { this.termsInvalid.set(null); } + public customEmailValidator(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const value = control.value; + if (value.length < 4) { + console.log(value.length); + return { emailTooShort: true }; + } + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return emailPattern.test(value) ? null : { emailInvalid: true }; + }; + } + + public passwordValidator(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const value = control.value; + return value.length >= 8 ? null : { passwordTooShort: true }; + }; + } + private signin(): void { console.log('Signin...'); }