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...');
   }