chore: IDK

src/app/component/auth/register/register.component.html

@@ -88,9 +88,20 @@
 
           <div formGroupName="email">
             <h5 class="mt-3">Email</h5>
+            @if (this.emailGroup.errors) {
+              <p class="text-danger">The emails do not match</p>
+            }
             <div class="row">
               <div class="col-md-6 mb-3">
                 <label for="email" class="form-label">Email</label>
+                @if (this.emailGroup.controls["email"].invalid) {
+                  @if (this.emailGroup.controls["email"].errors!["required"]) {
+                    <p class="text-danger">Email is required</p>
+                  }
+                  @if (this.emailGroup.controls["email"].errors!["email"]) {
+                    <p class="text-danger">Email is invalid</p>
+                  }
+                }
                 <input
                   id="email"
                   class="form-control"
@@ -102,6 +113,18 @@
                 <label for="confirmEmail" class="form-label"
                   >Confirm Email</label
                 >
+                @if (this.emailGroup.controls["confirmEmail"].invalid) {
+                  @if (
+                    this.emailGroup.controls["confirmEmail"].errors!["required"]
+                  ) {
+                    <p class="text-danger">Email is required</p>
+                  }
+                  @if (
+                    this.emailGroup.controls["confirmEmail"].errors!["email"]
+                  ) {
+                    <p class="text-danger">Email is invalid</p>
+                  }
+                }
                 <input
                   id="confirmEmail"
                   class="form-control"
@@ -114,9 +137,19 @@
 
           <div formGroupName="password">
             <h5 class="mt-3">Password</h5>
+            @if (this.passwordGroup.errors) {
+              <p class="text-danger">The passwords do not match</p>
+            }
             <div class="row">
               <div class="col-md-6 mb-3">
                 <label for="password" class="form-label">Password</label>
+                @if (this.passwordGroup.controls["password"].invalid) {
+                  @if (
+                    this.passwordGroup.controls["password"].errors!["required"]
+                  ) {
+                    <p class="text-danger">Password is required</p>
+                  }
+                }
                 <input
                   id="password"
                   class="form-control"
@@ -128,6 +161,15 @@
                 <label for="confirmPassword" class="form-label"
                   >Confirm Password</label
                 >
+                @if (this.passwordGroup.controls["confirmPassword"].invalid) {
+                  @if (
+                    this.passwordGroup.controls["confirmPassword"].errors![
+                      "required"
+                    ]
+                  ) {
+                    <p class="text-danger">Password is required</p>
+                  }
+                }
                 <input
                   id="confirmPassword"
                   class="form-control"

src/app/component/auth/register/register.component.ts

@@ -15,7 +15,6 @@ import CustomValidators from '../../../service/custom.validators';
 })
 export default class RegisterComponent {
   registerService: AuthService = inject(AuthService);
-
   fb: FormBuilder = inject(FormBuilder);
 
   emailGroup: FormGroup = this.fb.group(
@@ -57,7 +56,9 @@ export default class RegisterComponent {
   submit() {
     if (!this.form.valid) {
       console.log(this.addressGroup.controls['zip']);
+      console.log(this.passwordGroup.errors);
       console.log(this.form.value);
+      console.log(this.emailGroup.controls['email'].errors);
       return;
     }
 

src/app/service/custom.validators.ts

@@ -3,7 +3,9 @@ import { AbstractControl, AsyncValidatorFn, ValidatorFn } from '@angular/forms';
 export default class CustomValidators {
   public static email(): ValidatorFn {
     return (emailGroup: AbstractControl) => {
-      if (emailGroup.get('email')?.value !== emailGroup.get('confirmEmail')) {
+      if (
+        emailGroup.get('email')?.value !== emailGroup.get('confirmEmail')?.value
+      ) {
         return { emailMismatch: true };
       }
 
@@ -29,10 +31,9 @@ export default class CustomValidators {
 
   public static password(): ValidatorFn {
     return (passwordGroup: AbstractControl) => {
-      console.log(passwordGroup);
       if (
         passwordGroup.get('password')?.value !==
-        passwordGroup.get('confirmPassword')
+        passwordGroup.get('confirmPassword')?.value
       ) {
         return { passwordMismatch: true };
       }